Проблемы с переключением между формами входа / регистрации

#javascript #php #jquery

Вопрос:

У меня возникли проблемы с переключением между моими формами регистрации и входа на страницу. Я не слишком знаком с JavaScript и jQuery, но это то, что я использую. Кстати, есть ли другой способ сделать это с помощью PHP?

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

 $("#toggle-login").click(function() {
  $("#signup").hide().attr("formnovalidate");
  $("#login").show();
});

$("#toggle-signup").click(function() {
  $("#login").hide().attr("formnovalidate");
  $("#signup").show();
});

$("document").ready(function() {
  $("#signup").hide();
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-data text-center">
  <h1 class="form-header">Header</h1>
  <div id="login" class="main-login">
    <form class="login-form" action="includes/login.inc.php" method="post">
      <input name="mailuid" type="text" placeholder="Page Name"></input>
      <br>
      <input name="pwd" type="password" placeholder="Password"></input>
      <br>
      <button name="login-submit" type="submit">Login</button>
    </form>
    <p>Need to Create an account?</p>
    <span class="btn btn-default" href="#" id="toggle-signup">Sign Up/span>
        </div>
    
        <div id="signup" class="main-signup text-center">
            <form class="signup-form" action="includes/signup.inc.php" method="post">
              <input name="pagename" type="text" placeholder="Page Name"></input>
              <br>
              <input name="pwd" type="password" placeholder="Password"></input>
              <br>
              <input name="pwd-repeat" type="password" placeholder="Repeat Password"></input>
              <br>
              <button name="login-submit" type="submit">Login</button>
            </form>
            <p>Already have an account?</p>
            <span class="btn btn-default" href="#" id="toggle-login">Log In</span>
  </div>
</div>

1. Вы включили jQuery? Проверьте свою консоль на наличие ошибок? Я вставил ваш код во фрагмент, и, похоже, он работает нормально. Примечание сбоку, в Sign Up/span> есть небольшая опечатка (но это не вызвало бы вашей проблемы)

2. это работает в «фрагменте запуска»

3. у меня ваш фрагмент кода работает нормально, вы просто пропустили закрытие диапазона после регистрации ‘Sign Up / span>’, но проблема не в этом.

Ответ №1:

Попробуйте переместить <script> блок в нижнюю часть вашей страницы. В настоящее время вы пытаетесь подключить обработчики щелчков событий для DOM-элементов, которые отсутствуют в момент выполнения блока сценария.

В качестве альтернативы вы можете переместить обработчики кликов jQuery в jQuery('document').ready() функцию, чтобы убедиться, что DOM готов к подключению обработчиков кликов.

Ответ №2:

Отложите ваш скрипт, чтобы он загружался после загрузки html

 <script src="name_of_your_js_file" defer>

1. Из MDN re: defer : «Этот атрибут не должен использоваться, если атрибут src отсутствует (т. Е. для встроенных скриптов), в этом случае это не имело бы никакого эффекта».

2. Да, я просто предположил, что их JavaScript будет во внешнем файле.