Stop an input field in a form from being submitted

Question

I'm writing some javascript (a greasemonkey/userscript) that will insert some input fields into a form on a website.

The thing is, I don't want those input fields to affect the form in any way, I don't want them to be submitted when the form is submitted, I only want my javascript to have access to their values.

Is there some way I could add some input fields into the middle of a form and not have them submitted when the form is submitted?

Obviously the ideal thing would be for the input fields to not be in the form element, but I want the layout of my resulting page to have my inserted input fields appear between elements of the original form.

Answer 1

The easiest thing to do would be to insert the elements with the disabled attribute.

<input type="hidden" name="not_gonna_submit" disabled="disabled" value="invisible" />

This way you can still access them as children of the form.

Disabled fields have the downside that the user can't interact with them at all- so if you have a disabled text field, the user can't select the text. If you have a disabled checkbox, the user can't change its state.

You could also write some javascript to fire on form submission to remove the fields you don't want to submit.

Answer 2

You could insert input fields with no "name" attribute:

<input type="text" id="in-between" />

Or you could simply remove them once the form is submitted (in jquery):

$("form").submit(function() {

   $(this).children('#in-between').remove();

});

Answer 3

Handle the form's submit in a function via onSubmit() and perform something like below to remove the form element: Use getElementById() of the DOM, then using [object].parentNode.removeChild([object])

suppose your field in question has an id attribute "my_removable_field" code:

var remEl = document.getElementById("my_removable_field");
if ( remEl.parentNode && remEl.parentNode.removeChild ) {
remEl.parentNode.removeChild(remEl);
}

This will get you exactly what you are looking for.

Answer 4

Do you even need them to be input elements in the first place? You can use Javascript to dynamically create divs or paragraphs or list items or whatever that contain the information you want to present.

But if the interactive element is important and it's a pain in the butt to place those elements outside the <form> block, it ought to be possible to remove those elements from the form when the page gets submitted.

Answer 5

You can write an event handler for onsubmit that removes the name attribute from all of the input fields that you want not to be included in the form submission.

Here's a quick untested example:

var noSubmitElements = [ 'someFormElementID1', 'someFormElementID2' ]; //...
function submitForm() {
    for( var i = 0, j = noSubmitElements.length; i < j; i++ ) {
        document.getElementById(noSubmitElements[i]).removeAttribute('name');
    }
}
form.onsubmit = submitForm;