views:

5038

answers:

3

Consider the following form:

<form action="/a" method="post"> 
    <input name="x" type="text" onblur="myonblur(e)" />
    <input name="y" type="text" />
    <input name="submit" type="submit" value="Submit" />
</form>

When focus is on element with name "x" and user presses submit button, onblur event fires but form is NOT submitted. Is there any way to make submit button work as expected if I have onblur events in my form?

+3  A: 

Consider optimizing your onBlur() method so it takes less time to run. If your form is prevented from getting submitted, it might be because the onBlur() is too long and hangs the browser from doing anything else.

You can also use the onChange() method instead of onBlur(). That may work better for you.

Click Upvote
Thank you for your answer. Idea is to check is username exists via AJAX call, so with onChange() it would be much harder to implement, if possible. So, you mean, there is no way for me to use onBlur()?
Artem
You should use asynchronous AJAX requests which run in the background and don't hang the browser. By using those the onSubmit will still work even if the ajax request isn't finished. Jquery library does async by default, have a look at http://docs.jquery.com/Ajax/jQuery.ajax
Click Upvote
A: 

Try adding

return true;

after calling your onBlur function. The problem you are facing with might be due to "return false" prevention of the event handlers.

BYK
No. The first answer was correct. I tried your approach and it did not help.
Artem
OK. It was just a possibility though ;)
BYK
A: 

Did you find the solution? This is the same scenario as the question: http://stackoverflow.com/questions/3452098/html-form-submit-event-lost-if-dom-was-modified-through-ajax

In my case I started doing onChange() and async scripts OnBlur()
Artem