JavaScript submit form excluding fields

Question

I have a simple html form:

<form action="test" method="post" id="myForm">
    <input type="text" name="myTextField">
    <input type="text" name="myTextField2">
    <input type="text" name="dontSubmitThisField">
</form>

And I need to submit it with JavaScript, but I want to exclude the dontSubmitThisField field from the request. Is there a way of doing that without Ajax?

Answer 1

Just add form="nosubmit" to the input. This assigns the field to a different form altogether, so it won't be submitted.

Answer 2

Just disable the field.

Either do it via HTML if the field cannot be updated by the user: http://www.w3schools.com/tags/att_input_disabled.asp

Or do it via jQuery with a on submit event:

$('#myForm').submit(function(){
    $('input[name="dontSubmitThisField"]').prop('disabled', true);
});

Answer 3

Disabled fields or fields without a name attribute won't submit.

However, if somehow you want to name your fields and do not want to disable them upfront, you could intercept all form submissions and disable every fields that have a data-no-submit attribute.

document.addEventListener('submit', function (e) {
    if (!e.defaultPrevented) {
        [].forEach.call(e.target.querySelectorAll('[data-no-submit]'), function (field) {
            field.disabled = true;
        });
    }
});

Then you can just do:

<input type="text" name="dontSubmitThisField" data-no-submit>