html form submission difference between click(), submit() and manual click in jquery

Question

I have a jsp page as follows:

<script type="text/javascript" src="/mywebapp/js/jquery.js"></script>
<script type="text/javascript">         
 $( function() {  
  $('#testform').submit(function(){
   alert('now starting submit');
   return true;
  });

  $("#test1btn").click(function(){
   $('#testform #submit').click();    
  }); 
  $("#test2btn").click(function(){
   $('#testform').submit();    
  }); 
 });    
</script>
<form id="testform" method="post"  action="backend/search_test.do">
<input id="reqpagenr" name="reqpagenr" size="10">
<input type="button" id="test1btn"  value="TestClick"/>
<input type="button" id="test2btn"  value="TestSubmit"/>
<input id="submit" type="submit" value="Go">
</form>

When I manually click (i.e. using a mouse) the button "Go", the form is submitted after displaying the text "now starting submit"; when click the button "TestClick", the form is successful submitted but the text "now starting submit" doesn't come up; when click the button "TestSubmit", the text "now starting submit" appears, but the form is not submitted at all.

Contrary to my expections, the buttons "TestClick" and "TestSubmit" do not function as the button "Go" does when both are clicked. In my understanding, the three button clicks should do the same thing, that is, to submit the form after the text "now starting submit" appears. So my question is, why the results of the three button clicks is different?

I am using jquery 1.3.2

Sketch

It's supposed to fire all the callbacks. Have you tried just that with the newest jquery to see if they maybe fixed it? – Rubin

@scragz, nope I tried with 1.4.4. and it behaves the same. – Frostbite

Answer 1

The second button does not submit the form because of a bug in jQuery (or the DOM) which causes the submit method to fail if the submit button's id is 'submit'. See: http://bugs.jquery.com/ticket/1414

Amir

+1 for this. I've personally dealt with that bug before, and it was a real pain in the neck. It took me forever to figure out that all I had to do was change "submit" to "Submit". Just changing the case was enough to do the trick! – Bozarth

Answer 2

It looks like the jQuery submit event handler is getting ignored when manually setting the form submit via $('#testform').submit();

This should work in the click handler:

$('#testform').trigger("submit")

Exoskeleton

Answer 3

UPDATED:

• DEMO: http://aseptik.net/demo/html-form-submission-difference-between-click-submit-and-manual-click-in-jqu/

1. actually as richardml said the first problem you have is a jQuery Bug so first thing is to rename the id of the submit to something else.

2. second problem is the type of the test1btn input that should be type="submit" in order to behave like a normal submit button.

The trick is to change the type on mouse hover, so the code will look like this:

$(function() {
    $('#testform').submit(function() {
        alert('now starting submit');
    });
    //TestClick
    $('#test1btn').hover(function() {
        $(this)[0].setAttribute('type', 'submit');
    },function() {
        $(this)[0].setAttribute('type', 'button');
    });
    //TestSubmit
    $('#test2btn').click(function() {
        $('#testform').submit();
    });
});

The rest is working as expected.

hope this help

Robyn

Answer 4

you should use the onsubmit event to trigger the function instead.

<form id="testform" method="post" onsubmit="foo()" action="backend/search_test.do">

this will trigger the foo() whenever you submit the form whether by using the submit button or submit() method.

Ultan