Submitting a javascript form

Question

I have a login form that I am trying to process using ajax.

When it first appears, it works great,

You press the login button,
if your data is correct, you are logged in and redirected.

If your details are incorrect, an error message is displayed.

If you wait until the error message disappears and press the login button again, it works fine.

if you don’t wait, it seems to send the form.
why is he doing this?

here is the code

var timeout = null; $(function() { $('form').submit(function() { var action = $(this).attr('action'); var type = $(this).attr('method'); $.ajax({ url: action, type: type, data: { email: $('input[name=email]').val(), pass: $('input[name=pass]').val() }, success: function(data) { switch (data.status) { case false: login_error(data.message); return false; break; case true: window.location = data.message; return false; break; } return false; } }); return false; }) }); function login_error(message) { $('form').effect('shake', { distance: 10, times: 3 }, 50); if (timeout !== null) { clearTimeout(timeout); $('#login').stop().hide(); show_error(message); } else { show_error(message); } } function show_error(message) { $('#error').html(message) .show("drop", {direction: 'left'}, 500); timeout = setTimeout(function() { $('#error').hide("drop", {direction: 'right'}, 500); timeout = null; }, 5000); } 

---

Edit
Ok, so it doesn’t refresh the page,

Something sets the form for display: none;

I added a whole bunch of console.log () through the code and double-clicked the login, so now it looks like this:

 var timeout = null; $(function() { $('form').submit(function() { console.log(1); var action = $(this).attr('action'); console.log(2); var type = $(this).attr('method'); console.log(3); $.ajax({ url: action, type: type, data: { email: $('input[name=email]').val(), pass: $('input[name=pass]').val() }, success: function(data) { console.log(4); switch (data.status) { case false: console.log(5); login_error(data.message); return false; break; case true: console.log(6); window.location = data.message; return false; break; } console.log(7); return false; } }); console.log(8); return false; }) }); function login_error(message) { console.log(9); $('form').effect('shake', { distance: 10, times: 3 }, 50); console.log(10); if (timeout !== null) { console.log(11); clearTimeout(timeout); $('#login').stop().hide(); console.log(12); show_error(message); console.log(13); } else { console.log(14); show_error(message); console.log(15); } } function show_error(message) { console.log(16); $('#error').html(message) .show("drop", {direction: 'left'}, 500); console.log(17); timeout = setTimeout(function() { console.log(18); $('#error').hide("drop", {direction: 'right'}, 500); timeout = null; }, 5000); console.log(19); } 

On exit:

1
2
3
POST http: // localhost / buzz / ajax / login 200 OK 30ms
eight
4
5
nine
ten
fourteen
16
17
19
fifteen
Second click
1
2
3
POST http: // localhost / buzz / ajax / login 200 OK 30ms
eight
4
5
nine
ten
eleven
12
16
17
19
13
18

Answer 1

One option is to have a regular button, not a submit button. Use onclick on the button you call as confirmation / ajax.

Answer 2

I assume this is due to the animation of the form and / or #error, which does not end. You might want to make sure that something has changed after a failed login. Therefore, some if/else before submitting the form to the code to make sure the form is submitted can do the job ... It would probably be nice to make sure that there is a value for the username and password before submitting the form ....

Here is a short sample of unverified code, with some comments about the changes ...

 $('form').submit(function() { //DEFINE "ISVALID()".... if($('input[name=pass]').val().ISVALID()) { //your do login code here... } else { login_error("Please enter a password!"); } }) function login_error(message) { //CLEAR PASSWORD $('input[name=pass]').val() = ""; //THE REST OF YOUR CODE HERE... }