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.

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.

• javascript
• jquery

Share Improve this question Follow asked Feb 5, 2013 at 3:32 sarcastyxsarcastyx 2,2291717 silver badges1616 bronze badges 3

• What are you trying to do exactly? – Explosion Pills Commented Feb 5, 2013 at 3:36
• You don't need to use javascript: inside of onclicks. – Shawn31313 Commented Feb 5, 2013 at 3:40
• There is some extra processing that happens in the callback function that needs to be executed and the form is submitted via the submit button or the other button. When I click the button the callback is never called and the form is never submitted. – sarcastyx Commented Feb 5, 2013 at 3:42

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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.

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./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./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();
            });
    });

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.

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>