How to prevent form element from sending some fields we don't want?

Question

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 tho

Answer 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
});

Answer 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

Answer 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.