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=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!

回答1:

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.

回答2:

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.

回答3:

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

回答4:

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.

回答5:

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

回答6:

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

回答7:

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.

回答8:

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

来源：https://stackoverflow.com/questions/3303874/jquery-form-not-submitting-with-id-submit-but-will-submit-with-a-subm

标签

jquery

forms

form-submit