Система подписки не работает после нажатия кнопки

Question

У меня есть следующий код:

Кнопка:

<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:

<script>
var divelement = document.getElementById("some_id");
window.addEventListener('DOMContentLoaded', function(){
    if(localStorage.getItem("form_submitted")){
        divelement.style.display = 'none';
    }else{
        //Local Storage Not Set
    }
});

function processForm(){
    //Send Ajax to submit data and after its response set the local Storage
    divelement.style.display = 'none';
    //Set
    localStorage.setItem("form_submitted", 1);
    return false; //this will prevent form from submitting and refreshing the page.
}

Как только пользователь нажимает кнопку, он / она подписка на программу. Чтобы позволить пользователю подписаться на программу, я создал следующий код:

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;
    }
}
?>

Я создал код Javascript, чтобы убедиться, что после того, как пользователь подписался на программу, кнопка, на которую он нажал вместе с программой исчезнут. Единственная проблема, с которой я столкнулся, это то, что пользователь больше не может подписаться на программу. Программа также не сохраняется в базе данных. Я просмотрел несколько видеороликов на YouTube по этой проблеме, но не нашел решения.

Кроме того, по какой-то причине при нажатии исчезает только верхняя кнопка. Не на кнопке.

Я пытаюсь поместить кнопку и элемент внутри нее в режим отсутствия отображения, как только он будет нажат. На изображении внизу показаны 2 кнопки.

Answer 1

Решение 2

Если вы хотите, чтобы был скрыт только один щелчок. Для этого вам необходимо внести изменения. Вот изменения.

• Удалить onSubmit из формы.
• Добавить Id в форму.
• Добавить counter переменную перед запуском l oop также увеличить его значение внутри тела l oop. Это сделано для создания уникальных идентификаторов.
• Объедините эту переменную счетчика в id для td и button.
• Измените тип кнопки с отправки на button .
• Вызов функции 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>

JS

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();
}

Answer 2

Вот решение, если вы хотите, чтобы все кнопки скрывались при отправке формы. Для этого вам нужно использовать class вместо 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;
}

И использовать class вместо id. У вас также есть использовать класс на td, как и в l oop, поэтому 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>