jQuery form Submit doesn't work when there is a callback function

Question

I have searched quite a bit for this but I can't seem to find a solution. The issue I have is that using the jQuery Submit function on a button does not work when there is a callback function defined. For example this is a small test code that I have:

JavaScript

function doSomething() {
    alert("Called the function");

    jQuery("#form").bind("submit", function() {
        alert("Form was submitted.");
    });
}

HTML

<form id="form" action="">
    <input type="button" onclick="javascript: doSomething();" value="From Button">

    <input type="submit" onclick="javascript: doSomething();" value="From Submit">
</form>

Now when I click the button the second alert is not displayed. If I click the submit I get both the alert messages. What I have found is that if I remove the callback function, then the form submit works fine with both the buttons. I have also tried to add an onSubmit on the form but that did not work either.

The version of jQuery I am allowed to use (and not allowed to change) is jQuery 1.3.2 . I know it is a very old version but because of corporate reasons I am not allowed to change it.

Answer 1

It should be

jQuery("#form").bind("submit", function() {
    alert("Form was submitted.");
});

function doSomething() {
    alert("Called the function"); 
}

You need to bind the submit handler before the submit happens. In your case the form submit happens, then you are registering the handler.

Answer 2

You are getting confused, you only need one or the other, since you called doSomething by adding the onclick attribute to input element. The jQuery within this function is never called unless you place it outside the 'doSomething' function.

Answer 3

Well, there are multiple things to say here.

First of all, you bound the "submit" handler to the form -- this is correct because forms have a "submit" event, not buttons.

Second all, HTML tags don't submit forms unless their type is "submit". So that explains why the handler you bound to the form's submit handler doesn't run.

Third, every time you execute .bind( ) it will bind another "copy" of the handler to the event, so when you finally click the tag, it will execute multiple times.

And fourth, you don't have to write "javascript:" in your onclick="" attribute. In fact, it's much better practice to leave active javascript code out of your HTML, and instead bind the events -- much like you are doing above -- in a function passed to jQuery. See http://api.jquery.com/ready/

Finally, since you are doing alert right before the submit, I'm guessing you might want to cancel the form submit -- so look into http://api.jquery.com/event.preventDefault/

Here is javascript code that does what you might actually want:

    jQuery(function ($) {
            $('#form').submit(function (e) {
                    // do what you have to do
                    e.preventDefault();
            });
    });

Answer 4

Whats happening is that you are binding a new "submit" callback every time the user clicks the submit button. You don't need the doSomething function at all. Try this:

var $submit = $("#submitButton").bind("submit", function(){
    console.log("submit");
});

...

<form>
     <input type="text" />
     <input type="button" />
     <input id="submitButton" type="submit" />
</form>