41
<form method="post" action="load_statements.php?action=load" id="loadForm"
                            enctype="multipart/form-data">

that is my form, which looks fine to me. in that form, i put this button:

<input type="button" name="submit" id="submit" value="Submit" onclick="confirmSubmit()" class="smallGreenButton" />

here is the function it calls:

function confirmSubmit() {
    // get the number of statements that are matched
    $.post(
        "load_statements.php?action=checkForReplace",
        {
            statementType : $("#statementType").val(),
            year : $("#year").val()
        },
        function(data) {
            if(data['alreadyExists']) {
                if( confirm("Statements already exist for " + $("#statementType").html() + " " + $("#year").val() +
                    ". Are you sure you want to load more statements with these settings? (Note: All duplicate files will be replaced)"
                )) {
                    $("#loadForm").submit();
                }
            } else {
                $("#loadForm").submit();
            }
        }, "json"
    );
}

and as you can see, it calls $("#loadForm").submit();, but the form is not submitting (ie. the page is not refreshing). why is that?

thanks!

2
  • Do you hit a breakpoint if you put it on the submit call?
    – mackenir
    Commented Jul 22, 2010 at 10:00
  • yeah, it runs, but doesn't actually submit the form for some reason.
    – Garrett
    Commented Jul 22, 2010 at 12:36

9 Answers 9

88

Change button's "submit" name to something else. That causes the problem. See dennisjq's answer at: http://forum.jquery.com/topic/submiting-a-form-programmatically-not-working

See the jQuery submit() documentation:

Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures. For a complete list of rules and to check your markup for these problems, see DOMLint.

6
  • This seems to be the right answer, not the others. At least it was the exact problem in my case and appears to be the problem in the question. The other answers seem wrong.
    – arunkumar
    Commented Aug 10, 2013 at 9:01
  • I tested the same case and found that changing of id or name attributes still produce the same error.
    – Alex G.P.
    Commented Oct 25, 2013 at 7:36
  • 10
    This was the answer for me. Took forever to find out Commented Jan 13, 2014 at 12:05
  • at first, i thought that it might be the form's id or name that was causing the issue. turns out it was another input element that had an id/name that was submit. Changing that fixed this issue.
    – Reuben L.
    Commented Aug 26, 2014 at 15:06
  • 1
    Also I found you should also make sure the id of the button element is not set to "submit". The lesson I've learned is NEVER EVER put name="submit" OR id="submit" on a submit button or it will break $("form").submit()! I just spent hours trying to debug a form's behaviour and this was the problem. Commented Mar 30, 2017 at 10:06
21

I use $("form")[0].submit()

here $("form") returns an array of DOM elements so by accessing the relevant index we can get the DOM object for the form element and execute the submit() function within that DOM element.

Draw back is if you have several form elements within one html page you have to have an idea about correct order of "form"s

2
  • Fixed the problem for me, +1
    – Angad
    Commented Mar 9, 2013 at 13:07
  • 1
    @garrett $("#loadForm")[0].submit(); works for me. It seems that submit() does not work on an array of elements returned by $("#loadForm") selector.
    – hongster
    Commented Dec 2, 2013 at 8:43
18

http://api.jquery.com/submit/

The jQuery submit() event adds an event listener to happen when you submit the form. So your code is binding essentially nothing to the submit event. If you want that form to be submitted, you use old-school JavaScript document.formName.submit().


I'm leaving my original answer above intact to point out where I was off. What I meant to say, is that if you have a function like this, it's confusing why you would post the values in an ajax portion and then use jQuery to submit the form. In this case, I would bind the event to the click of the button, and then return true if you want it to return, otherwise, return false, like so:

$('#submit').click( function() {
  // ajax logic to test for what you want
  if (ajaxtrue) { return confirm(whatever); } else { return true;}
});

If this function returns true, then it counts as successful click of the submit button and the normal browser behavior happens. Then you've also separated the logic from the markup in the form of an event handler.

Hopefully this makes more sense.

9
  • 4
    Thats if you pass a function. If you just call submit(), the default submit action on the form will be fired, so the form will be submitted.
    – Yisroel
    Commented Jul 21, 2010 at 21:23
  • ... supposedly... but for some reason, no =(
    – Garrett
    Commented Jul 22, 2010 at 12:41
  • 1
    I've updated the answer to explain what I meant. I was not being very clear, that was my bad.
    – NateDSaint
    Commented Jul 22, 2010 at 18:27
  • i need to get ajax data because depending on the form, the confirmation will be different (if you want specifics, i am checking to see if the file a user is uploading is already in the database, and if so, notifying that the old file will be overwritten). although it kills me to say it, your answer is better than mine, as it is more semantic and does not require an invisible submit button. i'm marking this as the correct answer, but i'm still confused as to why the submit() function didn't work =(
    – Garrett
    Commented Jul 23, 2010 at 17:49
  • 2
    To be honest I think your problem is that the event that's firing it is the click of the submit button, and you're telling jQuery to perform a submit() within that function. All you really have to do is return true, and the onclick goes through.
    – NateDSaint
    Commented Jul 23, 2010 at 20:13
13

I had a similar problem, took a while to figure it out. jQuery's .submit() function should trigger a form submit if you don't pass a handler to it, but the reason it doesn't is because your submit button is named "submit" and is overriding the submit function of the form.

i.e. jQuery calls the <form>.submit() function of the DOM object, but all inputs within a form can also be access by calling <form>.<inputname>. So if one of your input's is named 'submit' it overrides the <form>.submit() function with <form>.submit - being the input DOM element.... if that makes sense? So when jQuery calls <form>.submit() it doesn't work because submit is no longer a function. So, if you change the name of your button it should work.

Not sure why the console doesn't log an error, perhaps jQuery is first checking that the submit function exists and is just ignoring the request if the function doesn't exist.

2
  • sorry, my post didn't turn out as expected. the second paragraph should read: i.e. jQuery calls the form.submit() function of the DOM object, but all inputs within a form can also be access by calling form.inputname. So if one of your input's is named 'submit' it overrides the form.submit() function with form.submit - being the input DOM element.... if that makes sense? So when jQuery calls form.submit() it doesn't work because submit is no longer a function.
    – Donovan
    Commented Dec 4, 2014 at 2:33
  • today i face same problem and your solution worked for me +10 from my side. thanks. Commented Apr 4, 2016 at 9:58
4

i added an invisible submit button to the form, and instead of calling the submit() function, i call the click() function on the submit button =)

the button: <div style="display:none"><input id="alternateSubmit" type="submit" /></div>

the crazy way to get around the form submission: $("#alternateSubmit").click();

1
  • I updated my answer to include a new possible solution, which I successfully tested, I can provide the code for that if you'd like it.
    – NateDSaint
    Commented Jul 23, 2010 at 16:39
4

erase attribute "name" in your submit button :

this is your code :

<input type="button" name="submit" id="submit" value="Submit" onclick="confirmSubmit()" class="smallGreenButton" />

should be like this :

<input type="button" id="submit" value="Submit" onclick="confirmSubmit()" class="smallGreenButton" />
1
  • 2
    It also works if you change its name from "submit" to something else Commented Feb 28, 2017 at 7:59
0

Try this, worked for me

if you do have submit as id or name, you need to rename that form element.

can not give id="submit" to any other element of form if you want to use element.submit() in script.

Form Submit jQuery does not work

-1

Looks like you have the submit happening in a callback that only runs after an ajax post in your onclick handler.

In other words, when you click submit, the browser has to first go out and hit the checkForReplace action.

1
  • yes, which it does, and then hits $("#loadForm").submit(); which does nothing.
    – Garrett
    Commented Jul 22, 2010 at 12:42
-3

its Ajax call, why you need to submit your form while you already process it using ajax. You can navigate away from page using

window.location.href = "/somewhere/else";
1
  • i need to process part of it before in order to give the user the correct confirm() statement.
    – Garrett
    Commented Jul 22, 2010 at 12:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.