Javascript 单击按钮后订阅系统不工作

我有以下代码：

if (isset( $_POST['programma'] ) && isset( $_POST['set_programma'] ) && wp_verify_nonce( $_POST['set_programma'], 'set_programma_action' )) {

    $data = filter_input( INPUT_POST, 'programma', FILTER_SANITIZE_STRING );
    $current_user_id = get_current_user_id();

    if ( $current_user_id && ! empty( $data ) ) {
        //voeg de huidige user_id en data toe in de rij met meta_key programma
        $addprog = add_user_meta( $current_user_id, 'programma', $data );
        echo "U bent geabonneerd op". ' ' . $data;
    }
}
?>

按钮：

<br>
<p>Programma's waarop u kunt abonneren:</p>
<form action="#" enctype="multipart/form-data" method="post" onSubmit="return processForm();">
    <?php wp_nonce_field( 'set_programma_action', 'set_programma' ); ?>
    <table>
        <?php foreach ( $retrieve_data as $retrieved_data ) { ?>
            <tr>
                <th>Programma:</th>
                <td id="hideit" style="vertical-align: middle;">
                <?php
                 echo $alreadysub; echo esc_html( $retrieved_data->Anaam );
                 ?>
                 </td>
                <th>
                <div><button id="some_id" style="display:block" onclick="hidenow('hideit')" name="programma" type="submit" value="<?php echo esc_attr( $retrieved_data->Anaam ); ?>">Abonneer</button></div>
                </th>
            </tr>
        <?php } ?>
    </table>
</form>

我创建了Javascript代码，以确保一旦用户订阅了一个程序，他单击的按钮就会与程序一起消失。我唯一的问题是用户不能再订阅程序了。该程序也不会保存在数据库中。我已经在youtube上搜索了几个关于这个问题的视频，但我找不到解决方案

此外，由于某些原因，只有顶部按钮在单击时消失。不是屁股

我试图在按下按钮后立即将按钮和其中的元素显示为无。2个按钮见下图

---

如果您希望在提交表单时隐藏所有按钮，这里有一个解决方案。为此，您必须使用类而不是id

var divelement = document.getElementsByClassName("some_class");

function hideByClass(){
    for(var i = 0; i < divelement.length; i++){
                divelement[i].style.display = "none";
            }
}
window.addEventListener('DOMContentLoaded', function(){
    if(localStorage.getItem("form_submitted")){
         hideByClass();
    }else{
        //Local Storage Not Set
    }
});


function processForm(){
    //Send Ajax to submit data and after its response set the local Storage
    hideByClass();
    //Set
    localStorage.setItem("form_submitted", 1);
    return true;
}

var divelement=document.getElementsByClassName（“some_类”）；
函数hideByClass（）{
对于（var i=0；i

使用类而不是id。您还必须在td上使用类，因为它也在循环中，所以id不应该重复

<div><button class="some_class" style="display:block" onclick="hidenow('hideit')" name="programma" type="submit" value="<?php echo esc_attr( $retrieved_data->Anaam ); ?>">Abonneer</button></div>

---

解决方案2

如果只想隐藏单击的一个。为此，您需要进行修改。以下是修改


从表单中删除提交时的

将Id添加到表单中
在开始循环之前添加一个计数器变量，并在循环体内部增加其值。这是用于生成唯一ID的
在td和button的id中连接此计数器变量
将按钮类型从提交更改为按钮
使用计数器的传递值调用按钮单击上的processForm函数，以确定单击了哪个按钮

HTML/PHP

<form action="#" enctype="multipart/form-data" method="post" id="myForm">
    <?php wp_nonce_field( 'set_programma_action', 'set_programma' ); ?>
    <table>
        <?php 
        $counter=0; 
        foreach ( $retrieve_data as $retrieved_data ) { ?>
        <tr>
            <th>Programma:</th>
            <td id="hideit<?php echo $counter;?>" style="vertical-align: middle;">
            <?php
             echo $alreadysub; echo esc_html( $retrieved_data->Anaam );
             ?>
             </td>
            <th>
            <div><button id="some_id<?php echo $counter;?>" style="display:block" name="programma" type="button" value="<?php echo esc_attr( $retrieved_data->Anaam ); ?>" onClick="processForm(<?php echo $counter;?>);">Abonneer</button></div>
            </th>
        </tr>
        <?php 
            $counter++;
            } ?>
    </table>
</form>

在processForm（）函数中将return false更改为return true。我希望您将逻辑放在这里，但由于存在return false，因此不允许表单提交。非常感谢@AdeelTahir。我只有最后一个问题。你能帮我解决这个问题吗？我有另一个按钮，其id与我用于另一个按钮的id完全相同。它实际上只是一个按钮，但由于它们位于
foreach
中，因此将显示两次。然而，当我点击这个按钮时，它不会消失。这是带有id的按钮
一些id
哦，恐怕@Parsa_237您不能在不同的元素上有相同的id。ID不应重复，您可以将其更改为类以获得结果，但请记住，这样会隐藏所有具有该类的按钮。如果您希望这样做，它将起作用，否则您需要修改现有代码以获得结果。嗨，Adeel。非常感谢您发布的答案。我真的很感激。不幸的是，两个按钮都不可见。我试图返回false，但这不起作用。你知道如何解决这个问题吗。请慢慢回答。我想确认一下，因为您使用的是loop，所以它会显示多个td和按钮。提交表单后，您希望隐藏所有按钮还是单击的按钮？是的，只有单击的按钮必须隐藏。我试过了，但没用。嗨，阿德尔。非常感谢你的回答。没有你的帮助，我不会走这么远。我现在正在读一些文章并尝试一些东西。它几乎在工作。它里面的元素现在也不显示了，这很好。我只面临几个我正试图解决的问题。该字段不会永久显示，我无法再提交。我也无法在“无显示”中将按钮放在其下方。因为有两个按钮。我不想给你施加压力，我对你要求太多感到羞愧。更新：嗨，阿德尔，下面的按钮现在也可以用了。我唯一的问题是我点击的按钮和元素不是永久不显示的，我不能再提交了。你能帮我解决最后一个问题吗？@Parsa_237我没有收到你的最后一个问题。我建议，因为对话太长了，所以我们可以通过聊天进行个人讨论，我尝试找出并解决问题你的问题。嗨，阿德尔，我无法在聊天中添加你。你能和我聊天并邀请我参加吗？
<form action="#" enctype="multipart/form-data" method="post" id="myForm">
    <?php wp_nonce_field( 'set_programma_action', 'set_programma' ); ?>
    <table>
        <?php 
        $counter=0; 
        foreach ( $retrieve_data as $retrieved_data ) { ?>
        <tr>
            <th>Programma:</th>
            <td id="hideit<?php echo $counter;?>" style="vertical-align: middle;">
            <?php
             echo $alreadysub; echo esc_html( $retrieved_data->Anaam );
             ?>
             </td>
            <th>
            <div><button id="some_id<?php echo $counter;?>" style="display:block" name="programma" type="button" value="<?php echo esc_attr( $retrieved_data->Anaam ); ?>" onClick="processForm(<?php echo $counter;?>);">Abonneer</button></div>
            </th>
        </tr>
        <?php 
            $counter++;
            } ?>
    </table>
</form>

function processForm(counter){
    //Send Ajax to submit data and after its response set the local Storage
    document.getElementById("hideit"+counter).style.display = 'none';
   document.getElementById("some_id"+counter).style.display = 'none';

    //Set
    localStorage.setItem("form_submitted", 1);
    document.getElementById("myForm").submit();
}