Javascript: window.location перезагружает ту же страницу, на которой написан скрипт

Question

У меня есть форма для входа на страницу (Home.html), в которой содержится идентификатор электронной почты и пароль. Это проверяется с помощью JavaScript и перенаправляет на другую страницу (login.html)

function redirect() { 
    var email = $('#email').val(); 
    var password = $('#password').val(); 
    if(email=='user@gmail.com' && password=='user') 
    window.location = 'Login.html'; 
    else 
    alert("Wrong credentials"); 
} 


<form onsubmit='redirect()' method='post'> 

Если неправильные учетные данные введены, то отображается окно предупреждения, как и ожидалось, но когда правильные учетные данные вводятся затем home.html перезагружается вместо того, чтобы на переход на Login.html

Я попытался изменить window.location на window.location.href, но это не поможет.

Он работает правильно, если тег формы не используется, а onclick используется в теге кнопки для вызова функции redirect().

Answer 1

Подача формы вызовет новую страницу для загрузки. Это отменит любое задание location, выполненное JS из его события отправки.

Поскольку у вас нет атрибута действия, загружается новая страница с тем же URL-адресом, что и существующая страница.

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

<form onsubmit='redirect(); return false;' method='post'> 

---

Современный код будет связать обработчик событий с помощью JavaScript, вместо того, чтобы использовать внутренние обработчики событий в первую очередь:

<form method='post'> 

и

function redirect(event) { 
    var email = $('#email').val(); 
    var password = $('#password').val(); 
    if(email=='user@gmail.com' && password=='user') 
    window.location = 'Login.html'; 
    else 
    alert("Wrong credentials"); 
    event.preventDefault(); 
} 

document.querySelector("form").addEventListener("submit", redirect); 

---

Надежный код будет написан unobtrusively, так что если JavaScript failed (который it will), форма будет отправлена ​​как обычно, а серверный код будет выполнять эту операцию.

---

И все это в стороне, имя пользователя, пароль и необеспеченные URL, который пользователь перенаправляется на все видны в исходном коде страницы, так что вам действительно нужно делать это на сервере и только на сервер в любом случае.

Answer 2

<form onsubmit='redirect();return false;' method='post'>

Answer 3

форма не будет представлен, если вы return false от метода переадресации, попробуйте return false при возникновении ошибки.

function redirect() { 
    var email = $('#email').val(); 
    var password = $('#password').val(); 
    if(email=='user@gmail.com' && password=='user') 
    window.location = 'Login.html'; 
    else 
    { 
    alert("Wrong credentials"); 
    return false; 
    } 
} 

И форма изменения в

<form onsubmit='return redirect()' method='post'>