jQuery - form won't submit using jQuery

Question

Further to my problem here - jQuery on submit validation, with modal dialog at the end?

It seems like the form simply will not submit using jQuery. Here's my code at a very simplified level:

<script type="text/javascript">

     $(document).ready(function(){
        $(document).click(function() {
            $('#inputform').submit();
        });

        $("#inputform").submit(function() {
            alert('test');
            return true;
        });
    });
</script>

<form method="POST" action="<?php echo CURRENT_PAGE ?>" id="inputform">

<button type="submit" name="submit" id="submit">Submit form</button>

</form>

Clicking on the body displays the 'test' alert but doesn't submit the form. Also, upon closing the alert box, it won't re-appear when you click again.

Simply clicking on the submit button itself displays the alert then submits the form as expected.

Sorry for what is (I know) a really stupid question, but I'm at a loss here. TY!

@ tj - sorry! I tried adding it in but it kept messing with the formatting above. @ mgraph - thank you, but I have a lot of validation in there — xn dx
– xn dx, Commented Mar 1, 2012 at 8:47

T.J. Crowder · Accepted Answer · 2012-03-01 08:57:17Z

26

The problem is that you've given your submit button the name "submit". Change it to just about anything else and it'll work. (Also change the id, best to keep them the same, not least because of some browser issues.)

Why: Form elements have a property called submit which is the function you can call to submit them. (jQuery uses this under the covers when you call submit on the jQuery instance.) But Form elements also receive properties for each of the fields in the form, using the field's name, and so if you have a field called "submit", it overrides the submit function, which means you can't submit the form programmatically.

Working example: Live copy | Live source

<script type="text/javascript">

     $(document).ready(function(){
        $(document).click(function() {
            $('#inputform').submit();
        });

        $("#inputform").submit(function() {
            alert('test');
            return true;
        });
    });
</script>

<form method="GET" action="http://jsbin.com/uwuzon" id="inputform">
<input type="text" name="foo" value="bar">
<button type="submit" name="someOtherName" id="someOtherName">Submit form</button>
</form>

(The significant change is the name="someOtherName" id="someOtherName" part. The other changes [changing the form's action and method] are just so it works on JSbin.)

Side note: You don't have to return true; in your submit event handler to allow the form submission. You just have to not return false;. :-)

edited Mar 1, 2012 at 8:57

answered Mar 1, 2012 at 8:50

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

xn dx Over a year ago

This is working perfectly now, thank you so much! I never knew having the name and id of submit would cause so many problems :$

T.J. Crowder Over a year ago

@xndx: :-) Good deal, glad that helped!

Kyle Hotchkiss Over a year ago

This drove me nuts. Great advice @T.J.Crowder. Fixed my bug too.

Collectives™ on Stack Overflow

jQuery - form won't submit using jQuery

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related