Кнопка onSubmit не загружает местоположение

Question

Я перешел с type=click в type=submit так что я могу использовать клавишу Enter для входа в систему. Операторы if/else для неверного имени пользователя / пароля работают нормально. Но если я введу правильные учетные данные, это не приведет к загрузке местоположения (другая страница HTML).

PS: я новичок в кодировании в целом (всего 3 недели) Попробуйте объяснить, чтобы новичок знал. Заранее спасибо.

<script type="text/javascript">
    function check_info(){
        var username = document.login.username.value;
        var password = document.login.password.value;

        if (username=="" || password=="") {
            alert("Please fill in all fields")
        } else {
            if(username=="test") {
                if (password=="test") {
                    location="Random.html"
                } else {
                    alert("Invalid Password")
                }
            } else { 
                alert("Invalid Username")
            }
        }
    }
</script>

<form name=login onsubmit="check_info()">
    Username:
    <input type="text" name="username" id="username"/>
    <br>
    Password:
    <input type="password" name="password" id="password"/>
    <br>
    <br>
    <input type="submit" value="Login"/>
</form>

Answer 1

Две вещи:

1 - Правильный способ имитировать клик по ссылке - использовать href атрибут locationне location сам. Строка ниже должна работать:

window.location.href = "Random.html";

2 - Когда вы перенаправляете на другую страницу, вы должны "подавить" (остановить) естественное onsubmit событие.

Другими словами, вы должны returnfalse на onsubmit событие, в противном случае перенаправление (к Random.html) не будет иметь возможности работать, потому что сработает событие submit (и отправит пользователя в action страница формы) до перенаправления работает.

Так что меняй <form name=login onsubmit="check_info()"> чтобы:

<form name=login onsubmit="return check_info()">

И добавить return false; до конца check_info(),

Полный код должен быть следующим:

<script type="text/javascript">
    function check_info(){
        var username = document.login.username.value;
        var password = document.login.password.value;

        if (username=="" || password=="") {
            alert("Please fill in all fields")
        } else {
            if(username=="test") {
                if (password=="test") {
                    window.location.href = "Random.html"; // ------ CHANGED THIS LINE
                } else {
                    alert("Invalid Password")
                }
            } else { 
                alert("Invalid Username")
            }
        }
        return false; // ------------------------ ADDED THIS LINE
    }
</script>

И HTML (только onsubmit изменено):

<form name="login" onsubmit="return check_info()">
    Username:
    <input type="text" name="username" id="username"/>
    <br>
    Password:
    <input type="password" name="password" id="password"/>
    <br>
    <br>
    <input type="submit" value="Login"/>
</form>

JSFiddle демо здесь.

Answer 2

Вам нужно использовать .href на location

location.href = "Random.html";

(Кроме того, поскольку вы сказали, что вы новичок, при написании JavaScript и тестировании не забывайте открывать консоль разработчика (F12) - вы обнаружите множество ошибок в самом начале)

Answer 3

Новый способ сделать это - установить точку останова на линии

if(username=="test") {

И пройти через это, чтобы найти, в чем проблема.

Старый способ сделать это (еще до того, как у нас были отладчики Javascript) - это предупреждать сообщения в каждом из этих блоков и выяснять, почему вы вступаете в этот блок для начала. Это намного более громоздко, чем отладчик, но иногда вам может потребоваться прибегнуть к старой школе.