JavaScript не работает в форме

Question

У меня есть следующий HTML-код

<div class = "login"> 
     <form> 
     <input type="text" id="username" name="username" placeholder="Username" style="text-align:center"> <br> <br> 
     <input type="password" id="password" name="password" placeholder="Password" style="text-align:center"> <br> <br> 
     <input onclick="loginButton();" name="login_btn" id="login_btn" type="submit" value="Login"> 
     </form> 
    </div> 

А следующий JavaScript:

<script type="text/javascript"> 
    function loginButton() { 
     console.log("this function was called") 
    } 
</script> 

В моей консоли, когда я нажимаю на кнопку отправки, «эта функция была вызвана» появляется только на короткую секунду, а затем исчезает. Однако, когда я помещаю кнопку отправки вне формы, сообщение остается и полностью выполняет остальную часть моей функции.

Answer 1

Ваша форма отправляется, и страница перезагружается - из-за type="submit" на input элемент.

Изменить это либо

type="button"

или

onclick="loginButton(); return false;"