捕获 jQuery 表单提交事件

Question

I don't know what is wrong with that, because I was following at every step the tutorial from jquery.com regarding the form submit event.

My Javascript:

[Ofc. latest jQuery library is included].

<script type="text/javascript">
$("form#addFav").submit(function(event) { event.preventDefault(); alert("hello"); });
</script>

Have also tried with the $(document).ready() event:

$(document).ready(function(){
$("form#addFav").submit(function(event) { event.preventDefault(); alert("hello"); });
});

Here is my HTML form code:

<form action="" id="addFav">
     <input type="text" name="name" class="thin-d"/>
     <input type="submit" value="Send"/>
</form>

So, regarding the above Javascript code, it is supposed to work (I mean it should prevent default action [submitting form] and send the alert then), but it all doesn't work - have tried with thousands of combinations, but I fail'd. So I'm waiting for your solutions. I'd appreciate every one.

Answer 1

You probably have some syntax error or somthing like that somewhere else, because what you have just works .

Are you sure there aren't any JS errors?

PS I would alwyas go for the latter code to ensure that the elements are in the DOM before trying to attach events.

Answer 2

For anyone else who has the same problem, and still struggling to solve this issue, try to see if you have illegally reused the id , and try changing the form id to something unique .

I had accidentally given the id to two different DOM elements and the event was being bound to the first element with the respective id and my form was the second one so it was never captured. This had me pulling my hairs for quiet a long.

Answer 3

I just recently ran into the same issue. Jquery on submit would not work on the form, however just changing it to click event worked fine. Still at a loss why .on(submit) or .submit() events will not recognize the form.

 $("form#addFav").click(function (event) { event.preventDefault(); alert("hello"); $(this).submit(); });

Answer 4

this question is old but.. you might have had another submit events firing before yours fired. If these other events contained "return false;" statement then the event execution got interrupted and your code never fired. To put your code BEFORE these events you might use ONSUBMIT form attribute where you can put code that will fire before or at the same time as other events.