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!

Answer 1

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;. :-)