How to prevent form element from sending some fiel

问题:

I have a form element that contains about 5 fields which final query is going to create by processing values those fields. So I want to send only final query, not all of those, to the server. How can I exclude those fields from being submitted (using jQuery)?

<form action="abc/def.aspx" method="get">
    <input type="text" name="field1" />
    <input type="text" name="field2" />
    <input type="text" name="field3" />
    <input type="text" name="field4" />
    <input type="text" name="field5" />
    <input type="hidden" name="final" />
    <input type="submit" value="Send" />
</form>

Output of form submission looks like below:

abc/def.aspx?field1=val1&field2=val2&field3=val3&field4=val4&field5=val5&final=finalQuery

回答1:

Remove the element on submit.

On the onsubmit handler:

$(formElement).submit(function() {
    $(this.field1).remove(); //removing field 1 from query
    return true; //send
});

Disabling the form element also stops it from being entered into the query.(tested on Chrome)

$(formElement).submit(function() {
    this.field1.disabled = true;
    return true; //send
});

回答2:

Remove the name attribute on the fields you do not want submitted to the server.

<form action="abc/def.aspx" method="get">
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="hidden" name="final" />
    <input type="submit" value="Send" />
</form>

This is the simplest way to achieve what you want, and it works on all major browsers.

W3 spec talks about only submitting form values when name is present: http://www.w3.org/TR/html401/interact/forms.html#h-17.2

回答3:

I think the best solution is to handle the submit and then send the request yourself:

$(form).submit(function() {
    //do everything you need in here to get the final result
    var finalResult = alotoflogic();
    $.get("abc/def.aspx",final=finalResult, "callbackfunction", "responseType");
    return false;
});

that should do exactly what you want. EDIT: as Alex pointed out this solution wouldnt send you to that page, just get the results if you need to go to the new page you can do:

$(form).submit(function() {
    //do everything you need in here to get the final result
    var finalResult = alotoflogic();
    window.location('abc/def.aspx?final='+finalResult);
    return false;
});

This way the browser is redirected to that page and only the final result is send.