jQuery: form not submitting with $("#id").submit(), but will submit with a 'submit' button?

<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=checkForReplac开发者_高级运维e",
        {
            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!

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.

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

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.

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.

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();

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" />

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

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.

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";