How to add a new hidden input fields to the form on submit

Question

I want to pass certain hidden parameters in a request when some conditions are met.

For example I want to pass these if this condition is true:

<script type="text/javascript"> 
 function checkClosureLevel()
 {
    var openLevel = document.getElementById('openLevel');
    var phyCompLevel = document.getElementById('phyCompLevel');
    var finCompLevel = document.getElementById('finCompLevel');

    if (openLevel.checked) { 
      //PASS HIDDEN FORM VARIABLES HERE AND SUBMIT FORM 
    }
 }
</script>

<form action="process.det_details" method="post" name="detParameterForm">
  <fieldset class="det">
    <legend>Closure Level</legend>
    <input type="checkbox" name="openLevel" >Open</input><br/>
    <input type="checkbox" name="phyCompLevel" >Physically Complete</input>
    <br/>
    <input type="checkbox" name="finCompLevel" >Financially Complete</input>
  </fieldset>
</form>

Append a hidden input element, with a given `name` and `value`. — Rob W, Feb 12 '12 at 18:17
Can you show the actual code? Your current code looks very broken, with the `` elements being placed at the top, then JavaScript code between, without ` — Rob W, Feb 12 '12 at 18:31
no, no ..those hidden variables are right next to the input "checkboxes" at the bottom of the page. Im just showing what I would need passed over to the request. — Doc Holiday, Feb 12 '12 at 18:37
The structure **matters**. Can you show the real structure, instead of randomly ordered bits of your code? — Rob W, Feb 12 '12 at 18:39
The script is going to be a series of "if" checks and on each if Im going to pass 3 specific hidden variables and submit the form. I just want to know how to construct in javascript how to set a hidden those 2 variable and subit the form.... — Doc Holiday, Feb 12 '12 at 18:40
Agree with Rob - The inputs doubtless should be between form tags, and the javascript is floating around without being enclosed in tags. The name tag for the inputs looks a little unusual to me (unless you're doing something clever which I've never seen..) — Adjam, Feb 12 '12 at 18:41
Yes Im passing the names and values to a map in a form bean and doing some magic there:)....But dont concern yourself with that...I just need to know how to pass for example ` ` in javascript and submit the form — Doc Holiday, Feb 12 '12 at 18:45

score 52 · Accepted Answer · edited Jun 21 '17 at 19:57

52

The document.forms object is a collection of all <form> elements in the page. It has numeric indexes, and named items. The named items correspond to a name attribute of each <form>.

var theForm = document.forms['detParameterForm'];

To make appending data easier, you can create a function which adds data for a given form.

function addHidden(theForm, key, value) {
    // Create a hidden input element, and append it to the form:
    var input = document.createElement('input');
    input.type = 'hidden';
    input.name = key; // 'the key/name of the attribute/field that is sent to the server
    input.value = value;
    theForm.appendChild(input);
}

// Form reference:
var theForm = document.forms['detParameterForm'];

// Add data:
addHidden(theForm, 'key-one', 'value');
addHidden(theForm, 'another', 'meow');
addHidden(theForm, 'foobarz', 'baws');

// Submit the form:
theForm.submit();

edited Jun 21 '17 at 19:57

Kingsley

977
2
11
27

answered Feb 12 '12 at 18:43

Rob W

341,306
83
791
678

@JackScott Thanks for [your edit](http://stackoverflow.com/review/suggested-edits/2484387). – Rob W Jul 11 '13 at 09:36
How can you do the same for Ajax forms? – HaBo Jul 02 '14 at 19:30
@HaBo That is very specific to the web application that generates the form. – Rob W Jul 02 '14 at 19:32
I am on ASP.NET MVC 5 Razors I have a Ajax form for which I am doing some validation with OnBegin Property of the Ajax Form, in that JS function I am appending the input elements. in my case my elements are getting appended after the post hits the server. Trying to find some help on how to append those elements before the post hits the server – HaBo Jul 02 '14 at 19:35
@HaBo Doesn't ring a bell here. I suggest to create a new question and add all relevant details plus tags. – Rob W Jul 02 '14 at 19:37
Could you explain the `'name-as-seen-at-the-server'` in your example? – boolean.is.null Mar 12 '17 at 17:04
1

@boolean.is.null It is a comment. If you delete `key;`, then you would see `'name-as....'` at the server. Currently it does not have any effect on the execution of the code. – Rob W Mar 13 '17 at 09:06

How to add a new hidden input fields to the form on submit

1 Answers1

Linked