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!

Garrett
  • 11,451
  • 19
  • 85
  • 126

9 Answers9

87

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.

Adam Berecz
  • 989
  • 1
  • 6
  • 5
  • 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 Aug 10 '13 at 09:01
  • I tested the same case and found that changing of `id` or `name` attributes still produce the same error. – Alex G.P. Oct 25 '13 at 07:36
  • 9
    This was the answer for me. Took forever to find out – Hard worker Jan 13 '14 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. Aug 26 '14 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. – AidanCurran Mar 30 '17 at 10:06
  • This is the right answer, i have no idea why the other one is selected – devplayer Aug 02 '18 at 18:38
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

Andrew Barber
  • 39,603
  • 20
  • 94
  • 123
Sahan Maldeniya
  • 1,028
  • 1
  • 14
  • 21
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.

E_net4
  • 27,810
  • 13
  • 101
  • 139
NateDSaint
  • 1,524
  • 2
  • 16
  • 35
  • 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 Jul 21 '10 at 21:23
  • ... supposedly... but for some reason, no =( – Garrett Jul 22 '10 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 Jul 22 '10 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 Jul 23 '10 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 Jul 23 '10 at 20:13
  • Binding the form's submit button makes it impossible to run browser's form validation. Something like `` will not be checked for being filled out correctly by browser. You may want to have it checked: `$("#form-id").submit(function(event) { event.preventDefault(); doSomething(); });`. This allows you to do AJAX calls with jQuery **and** client-side form-validation. – Roland Jan 19 '18 at 13:49
  • `event.preventDefault();` is for making sure the form is not submitted twice. – Roland Jan 19 '18 at 13:49
  • this is not the right answer, it has nothing to do with the actual problem. the real problem is in the submit button's name. When the submit button has the name "submit", that's when jquery gets confused! – devplayer Aug 02 '18 at 18:39
  • Yeah, see the edit: the below answer makes more sense, this was based on me misunderstanding the question. I've upvoted the below answer but I don't own the question so I can't make it the right one. – NateDSaint Aug 03 '18 at 20:12
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.

Donovan
  • 131
  • 1
  • 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 Dec 04 '14 at 02:33
  • today i face same problem and your solution worked for me +10 from my side. thanks. – Alive to die - Anant Apr 04 '16 at 09: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();

Garrett
  • 11,451
  • 19
  • 85
  • 126
  • 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 Jul 23 '10 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" />
Robith Ritz
  • 51
  • 1
  • 5
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

vaibhav raychura
  • 162
  • 1
  • 10
-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.

Joe Martinez
  • 854
  • 4
  • 9
-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";
Developer
  • 25,073
  • 20
  • 81
  • 128