Stop an input field in a form from being submitted

Stop an input field in a form from being submitted

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.

Solutions/Answers:

Solution 1:

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

});

Solution 2:

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.

Solution 3:

Simple try to remove name attribute from input element.
So it has to look like

<input type="checkbox" checked="" id="class_box_2" value="2">

Solution 4:

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;

Solution 5:

I just wanted to add an additional option: In your input add the form tag and specify the name of a form that doesn’t exist on your page:

<input form="fakeForm" type="text" readonly value="random value" />

Solution 6:

Add disabled=”disabled” in input and while jquery remove the attribute disabled when you want to submit it using .removeAttr(‘disabled’)

HTML:

<input type="hidden" name="test" value="test" disabled='disabled'/>

jquery:

$("input[name='test']").removeAttr('disabled');