Почему после переадресации с помощью php не работает js функция?

Question

[Andrew18]

Повесил на кнопку "войти" в модальном окне функцию, чтобы после нажатия на нее кнопка "зарегистрироваться" стала display="none"; но На эту же кнопку "войти" происходит отправка формы и переадресация на php. Проблема заключается в том, что после нажатия на кнопку "войти" форма отправляется, но стили display="none"; не применяется.

<?php
    $login = filter_var(trim($_POST['login']),
    FILTER_SANITIZE_STRING);
    $pass = filter_var(trim($_POST['pass']),
    FILTER_SANITIZE_STRING);

    $pass = md5($pass);

    $mysql = new mysqli('localhost', 'root', 'root', 'videoteka');
   
    $result = $mysql->query("SELECT * FROM `users` WHERE `login` = '$login' AND `pass` = '$pass'");
    $user = $result->fetch_assoc();
    if(count($user) == 0){
        echo "Такого пользователя не существует";
        exit();
    }

    setcookie('user', $user['name'], time() + 3600 * 2, "/");

    $mysql->close();

    header('Location: /videoteka');
?>

'use strict';

const buttonReg = document.querySelector('.header__menu_register');
const buttonAuth = document.querySelector('.header__menu_signin');
const buttonSuccess = document.querySelector('.btn-success');

function hide(){
    buttonReg.classList.add('hide');
}

function init(){
    btnTest.addEventListener('click', hide);
}

init();

<div id="openModal" class="modal modal-reg">
    <?php
        if($_COOKIE['user'] == ''):
    ?>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Регистрация</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="check.php" method="post">
                    <input type="text" name="login" id="login" class="form-control" placeholder="Введите логин">
                    <input type="password" name="pass" id="pass" class="form-control" placeholder="Введите пароль">
                    <input type="text" name="name" id="name" class="form-control" placeholder="Введите имя">
                    <button class="btn btn-success" type="submit">Зарегистрироваться</button>
                </form>
            </div>
        </div>
    </div>
    <?php else: ?>

    <?php endif;?>
</div>

<div id="openModal" class="modal modal-auth">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Авторизация</h3>
                <button type="button" class="close close-auth" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="auth.php" method="post">
                    <input type="text" name="login" id="login" class="form-control" placeholder="Введите логин">
                    <input type="password" name="pass" id="pass" class="form-control" placeholder="Введите пароль">
                    <button class="btn btn-success btn-test" type="submit">Войти</button>
                </form>
            </div>
        </div>
    </div>
</div>

Comments

[Andrew18]

Bavashi, https://codepen.io/elo-dev/pen/BajEevq Но в песочнице модальные окна не открываются

[Andrew18]

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

Answer 1

[Роман Дворянов]

После отправки формы у вас обновляется страница, соответственно все стили и скрипты на ней как при первом заходе, если вы используете куки, а вы их используете, вешайте туда какой-нибудь флаг, что форма отправлена и при загрузке ориентируйтесь по нему, если флаг есть, скрывайте кнопку, если нет, показывайте.

Или делайте отправку формы через AJAX, без перезагрузки страницы

Дело не в javascript, если б у вас не было отправки формы, то кнопка бы скрывалась. Это веб, если вы переходите или обновляете страницу, все начинается заново. Чтоб не менялось можно использовать localStorage, Cookie или сервер с базой, откуда можно дергать состояния, используйте, что больше нравится