Отключение кнопки ПОСЛЕ отправки данных

Question

Итак, у меня есть этот код:

Javascript:

<script>
    function hidenow(id) {
        var divelement = document.getElementById(id);
         var button = document.getElementById("hidebutton");

        if(divelement.style.display == 'none')
                divelement.style.display ='block',
                button.style.display = "block";
        else
                divelement.style.display = 'none',
                button.style.display = "none";
    }
</script>

И две кнопки:

<p>Programma's waarop u kunt abonneren:</p>
<form action="#" enctype="multipart/form-data" method="post">
    <?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>
                <button id="hidebutton" style="display:block" onclick="hidenow('hideit')" name="programma" type="submit" value="<?php echo esc_attr( $retrieved_data->Anaam ); ?>">Abonneer</button>
                </th>
            </tr>
        <?php } ?>
    </table>
</form>

<!-- Dit stuk code laat de programma's zien waar de radiostation al op geabonneerd is. -->
<br> 
<p>De programma's waarop u geabonneerd bent:</p>
<form action="#" enctype="multipart/form-data" method="post">
    <?php wp_nonce_field( 'set_programmatest_action', 'set_programmatest' ); ?>
    <table>
        <?php foreach ( $retrieve_data as $retrieved_data ) { ?>
            <tr>
                <th>Programma:</th>
                <td style="vertical-align: middle;"><?php echo esc_html( $retrieved_data->meta_value ); ?></td>
                <th>
                    <button name="programmatest" type="submit" id="button" value="<?php echo esc_attr( $retrieved_data->meta_value ); ?>">Abonnement opzeggen</button>
                </th>
            </tr>
        <?php } 
        ?>
    </table>
</form>

В тот момент, когда я нажмите кнопку; он исчезает. Но он возвращается, как только данные отправляются в базу данных и страница обновляется. Я хочу, чтобы кнопка (вместе с прилагаемой к ней программой) исчезла. Я уже пробовал сделать isset. Но в результате пропадают ОБЕ кнопки, а не одна.

Пример:

Это первая кнопка, написано во втором фрагменте кода. Когда я нажимаю одну кнопку, она должна исчезнуть вместе с программой. Я попытался сделать это, используя isset, но это привело к тому, что кнопка исчезла вместе (обе).

У меня также есть эта кнопка:

Я ничего не сделал с этой кнопкой, так как она мне не нужна.

Я пробовал посмотреть Stack Overflow, а также несколько статей и видео на YouTube. Я был занят этим неделю, но не знаю, как заставить его работать.

Как я могу убедиться, что первая кнопка не отображается даже после отправки данных в базу данных или после обновления страницы?

Answer 1

Вы должны добавить какое-то условие, которое проверяет, отображать ли кнопку или нет. После отправки формы вы можете установить данные localStorage и в своем logi c сначала проверьте это localStorage, если он установлен, не отображать кнопку, иначе отобразите их. Таким образом, если кто-то также обновит страницу, localStorage не потеряется, и ваша кнопка не будет отображаться. Вы можете сбросить localStorage через свой код, чтобы отобразить их снова.

В противном случае вы можете выполнить проверку загрузки страницы для данных / значения в база данных, если она существует, не отображать кнопку, иначе отображать их.

Answer 2

Вы пробовали https://developer.mozilla.org/pt-BR/docs/Web/API/Event/preventDefault?

Это останавливает обновление страницы.

document.getElementById("form").addEventListener("click", function(event){
  event.preventDefault()
});