Как предотвратить отправку элементом формы некоторых полей, которые нам не нужны?

Question

У меня есть элемент формы, который содержит около 5 полей, которые окончательный запрос собирается создать путем обработки значений этих полей.Поэтому я хочу отправить только последний запрос, а не все, на сервер.Как я могу исключить эти поля из отправки (используя 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>

Вывод формы отправки выглядит следующим образом:

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

Answer 1

Удалите атрибут name в полях, которые вы не хотите отправлять на сервер.

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

Это самый простой способ достичь желаемого, и он работает во всех основных браузерах.

Спецификация W3 говорит только об отправке значений формы при наличии имени: http://www.w3.org/TR/html401/interact/forms.html#h-17.2

Answer 2

Удалить элемент при отправке.

В обработчике отправки:

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

Отключение элемента формы также не позволяет ему быть введенным в запрос.

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

Answer 3

Я думаю, что лучшее решение - обработать запрос и затем отправить запрос самостоятельно:

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

это должно делать именно то, что вы хотите. РЕДАКТИРОВАТЬ: как Алекс указал, что это решение не отправит вас на эту страницу, просто получите результаты, если вам нужно перейти на новую страницу, которую вы можете сделать:

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

Таким образом браузер перенаправляется на эту страницу и отправляется только окончательный результат.