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

Question

У меня есть форма входа в систему и я хочу проверить, что функция вызывается, только если пользователь не может войти в систему, иначе эта функция не вызывается. Я хочу сделать это, просто используя Jquery, проверив, существует ли элемент на странице. Например, если они не вошли в систему, форма входа все еще будет на странице. Если они успешно вошли в систему, он не будет отображаться, поскольку они будут перенаправлены на домашнюю страницу. Вот мой код:

    $(document).on("submit", "#myForm", function (e) {

           if ($('#myForm').length) {

               alert("hello");
               // Call Function 

           }
    });
}

$(document).ready(Login);

Я пытаюсь использовать ($('#myForm').length), чтобы увидеть, существует ли еще форма входа на странице, и, если это произойдет, я вызову функцию, которую хочу вызвать,Однако проблема в том, что это называется не смотря ни на что (протестировано с alert).

Может кто-нибудь посоветовать мне, как я могу дождаться загрузки страницы после отправки формы, чтобы только ТОГДА мой код проверял, существует ли на странице форма для входа? Спасибо!

Answer 1

Попробуйте использовать этот код, просто установите ключ bool в sessionStorage и установите его на true при отправке, и проверьте при загрузке страницы, является ли это значение истинным и форма все еще существует ... здесь мой код не 'не работает из-за того, что в jsfiddle у меня нет доступа к sessionStorage, попробуйте его в своем проекте.

$(document).ready(function(){
  const form = $('#my-form');
  const isTried = window.sessionStorage.getItem('triedToLogin') || false;
  if (isTried && form.length) {
    alert("hello");
  }
  
  if (!form.length){
    window.sessionStorage.setItem('triedToLogin', false);
  }
  
  form.on('submit', function(){
      window.sessionStorage.setItem('triedToLogin', true);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="my-form">
<input placeholder="login" type="text" name="login"/>
<input placeholder="password" type="password" name="password"/>
<button type="submit">login</button>
</form>