Stop input field on form from submit

Question

I am writing javascript (greasemonkey / userscript) that inserts some input fields into a form on a website.

The fact is that I do not want these input fields to influence the form in any way, I do not want them to be submitted when the form is submitted, I want my javascript to have access to their values.

Is there a way to add some input fields to the middle of the form and not send them when submitting the form?

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

Answer 1

You can insert input fields without the "name" attribute:

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

Or you can just delete them after submitting the form (in jQuery ):

 $("form").submit(function() { $(this).children('#in-between').remove(); }); 

Answer 2

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

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

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

Disabled fields have the disadvantage that the user cannot interact with them at all, so if you have a disabled text field, the user cannot select the text. If you have disabled , the user cannot change his state.

You can also write javascript to write to the form to remove fields that you do not want to submit.

Answer 3

A simple attempt to remove the name attribute from an input element.
Therefore it should look like

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

Answer 4

I just wanted to add an additional option: at your input, add the form tag and specify the name of the form that does not exist on your page:

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

Answer 5

You can write an event handler for onsubmit that removes the name attribute from all input fields that you do not want to include in the form view.

Here is an example of quick, unverified testing:

 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; 

Answer 6

Add disabled = "disabled" to the input, and if jquery disable the attribute, if you want to send it using .removeAttr ('disabled')

HTML:

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

JQuery

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

Answer 7

I know this post is ancient, but I will answer anyway. The easiest / best way I've found is simply to simply give the name a blank.

Put this before submitting:

 document.getElementById("TheInputsIdHere").name = ""; 

In general, your submit function might look like this:

 document.getElementById("TheInputsIdHere").name = ""; document.getElementById("TheFormsIdHere").submit(); 

This will still send the form with all your other fields, but will not submit it without a name.

Answer 8

Process the submit form in the function via onSubmit () and do something like below to remove the form element: Use getElementById() for the DOM, then using [object].parentNode.removeChild([object])

Suppose your field has the 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 give you exactly what you are looking for.

Answer 9

Do you even need them to be input elements in the first place? You can use Javascript to dynamically create sections or paragraphs or list items or any other containing the information you want to present.

But if the interactive element is important, and it’s a pain in the butt, to put these elements outside the <form> block, it should be possible to remove these elements from the form when the page is submitted.

Answer 10

 $('#serialize').click(function () { $('#out').text( $('form').serialize() ); }); $('#exclude').change(function () { if ($(this).is(':checked')) { $('[name=age]').attr('form', 'fake-form-id'); } else { $('[name=age]').removeAttr('form'); } $('#serialize').click(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="/"> <input type="text" value="John" name="name"> <input type="number" value="100" name="age"> </form> <input type="button" value="serialize" id="serialize"> <label for="exclude"> <input type="checkbox" value="exclude age" id="exclude"> exlude age </label> <pre id="out"></pre> 

Answer 11

You need to add onsubmit to your form:

 <form action="YOUR_URL" method="post" accept-charset="utf-8" onsubmit="return validateRegisterForm();"> 

And the script will look like this:

  function validateRegisterForm(){ if(SOMETHING IS WRONG) { alert("validation failed"); event.preventDefault(); return false; }else{ alert("validations passed"); return true; } } 

It works for me every time :)