JavaScript not working inside form

Question

I have the following HTML code

   <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>

And the following JavaScript:

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

In my console, when I click the submit button, "this function was called" appears for only a brief second, and then disappears. Yet when I put the submit button outside of the form, the message stays, and fully executes the rest of my function.

Possible duplicate of [How do i stop the form from reloading using Javascript?](http://stackoverflow.com/questions/5150532/how-do-i-stop-the-form-from-reloading-using-javascript) — t.niese, May 26 '16 at 18:07

score 5 · Accepted Answer · answered May 26 '16 at 18:03

5

Your form gets submitted and the page reloads - because of type="submit" on input element.

Change it either to

type="button"

or

onclick="loginButton(); return false;"

answered May 26 '16 at 18:03

Igor

15,833
1
27
32

But inside form without submit button I think not possible. – Akram Khan May 26 '16 at 18:08
@AkramKhan - I don't understand your sentence, try rephrasing. – Igor May 26 '16 at 18:09
I am saying if you are submiting a form without jquery/ajax then you must must be use submit button – Akram Khan May 26 '16 at 18:12

JavaScript not working inside form

1 Answers1