jQuery submit function not working properly

Question

I have some questions with jQuery submit function.

here is work environment

jQuery: 1.7.2, chrome (18.0.1025.168 m).

There are 2 problems.

1st:

my codes like this

html

<form id="test" action="..." method="post">
     <input type="text" />
     <input type="submit">
</form>

jQuery

$('#test').submit(function(){
      return false;
})

the problem is it works fine in firefox and opera but chrome.

2st:

html: as above.

jQuery:

$('#test').submit(function(){
      if(...)
         alert(something..);
      return false;
})

it dosen't work in firefox,opera and chrome. it always trigger form.submit why.

I am very confused it. who can figure it out thanks!

the IF statement is very simple it no problem. like if(flag) the flag's value is a boolean value. — jame, May 13 '12 at 14:25
The accepted answer is wrong. `return false` should `preventDefault`. [Read this](http://stackoverflow.com/a/10729215/601179) I might write a full answer here if you like. — gdoron, Jun 03 '12 at 06:13
Thank you,if you write a full answer here I will appreciate it. — jame, Jun 06 '12 at 08:34

score 11 · Accepted Answer · edited Aug 08 '12 at 01:11

11

Don't use return false;. Try this instead:

$('#test').submit(function(event){
      event.preventDefault();
});

edited Aug 08 '12 at 01:11

iambriansreed

21,935
6
63
79

answered May 13 '12 at 14:08

moribvndvs

42,191
11
135
149

3

I did get the same vague downvote with the same "co-answerer(s)" [here](http://stackoverflow.com/questions/10572004/drop-down-list-display-div-when-clicking-an-option/). Seems a bit of a strange. – VisioN May 13 '12 at 14:20
3

So I guess I'm not going out on a limb by saying iambriansreed doesn't play well with others, despite the fact that I answered almost a minute before he did. – moribvndvs May 13 '12 at 14:23
Actually I up voted your answer and my answer was submitted before yours. I only edited for clarity. – iambriansreed May 13 '12 at 15:36
@VisioN. (continuing from other thread...) This answer as the accepted answer are both wrong. `return false` should `preventDefault`. [Read this](http://stackoverflow.com/a/10729215/601179) – gdoron Jun 03 '12 at 06:12
Regarding to the downvote, you might want to read the comments under [my answer](http://stackoverflow.com/a/10213695/601179). – gdoron Jun 03 '12 at 08:26

score 4 · Answer 2 · answered May 13 '12 at 14:08

4

Replace:

$('#test').submit(function(){
      return false;
});

with:

$('form#test').submit(function(event){    
      event.preventDefault();
});

answered May 13 '12 at 14:08

iambriansreed

21,935
6
63
79

something strange, it could not work just now but now it is ok. – jame May 13 '12 at 14:40
Read my comment to the OP. please read the linked answer. (I come here just now, so I don't know why you got downvoted, but it's wrong anyway.) – gdoron Jun 03 '12 at 06:44

score 3 · Answer 3 · answered May 13 '12 at 14:12

3

If you just dont want to submit the page you can simple use

onsubmit="return false" or if you want conditional submission that also is possible with the code that you have.

I don't see any issue with this

DEMO

Code:

$('#test').submit(function(event) {
    if(jQuery('#textbox').val() == '') {
       alert('Not submitting');
       //event.preventDefault(); Not necessary but better
       return false;
    }
})

answered May 13 '12 at 14:12

mprabhat

20,107
7
46
63

Something strange, i try `onsubmit="validate()"` and the function validate return false,but it always trigger form.submit. but it work like fine now. thanks. – jame May 13 '12 at 14:42
sometimes things happen and you can never get to know why it happened :) happy to see you have a solution – mprabhat May 13 '12 at 15:05

score 1 · Answer 4 · edited May 23 '17 at 10:27

This is sometimes a result of JS libraries or custom code that conflicts with the behavior of the submit handler, (for example having another submit handler that submits explicitly the form).

The ideal solution would be to debug and find the conflicting code and solve it.

But as a workaround one can change to use instead a click handler on the submit button, instead of a submit handler on the form.

One can do something like this:

    <input type="submit" id="btnSubmit">

Then in code you can do

$('#btnSubmit').click(function(){ //Actually we can do 'input[type="submit"]'
    return false;
})

However one has to be careful if the form allows to be submitted by hitting "enter", as in this case the calling of the click handler might be browser dependent and/or based on the libraries in use, see the comments in onsubmit="return false" has no effect on Internet Explorer 7/8 (form is still submitted) on Dirk Paessler's answer for more info.

But in order to be browser independent one might catch the "enter" key press button as well, as in the following code:

document.onkeypress = function(evt) {
   var evt = (evt) ? evt : ((event) ? event : null);
   var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
   if ((evt.keyCode == 13) && (node.type == "text")) { 
         /*return true or false here based on your logic*/;
   }
}

However one might also try the other suggestions in this thread such as calling e.preventDefault() directly, although this is what Jquery actually does behind the scenes, still it might be that your conflicting code is fine with it

jQuery submit function not working properly

4 Answers4

Linked