I use OptimizePress (wordpress theme). It has great opt-in forms but unfortunately, there isn't a way to add a hidden form field through their UI. I do have the option to add custom scripts for each page.

How can I dynamically add a predefined hidden field to a form? The form does not have an ID. Something like the following may work but how can it be done when there is no form ID?

var input = document.createElement("input");

input.setAttribute("type", "hidden");

input.setAttribute("name", "name_you_want");

input.setAttribute("value", "value_you_want");

//append to form element that you want .
document.getElementById("formname").appendChild(input);

This is the only form on the page.

Using some of the examples below, it doesn't work with type=hidden: .

But works with type=text: .

I use OptimizePress (wordpress theme). It has great opt-in forms but unfortunately, there isn't a way to add a hidden form field through their UI. I do have the option to add custom scripts for each page.

How can I dynamically add a predefined hidden field to a form? The form does not have an ID. Something like the following may work but how can it be done when there is no form ID?

var input = document.createElement("input");

input.setAttribute("type", "hidden");

input.setAttribute("name", "name_you_want");

input.setAttribute("value", "value_you_want");

//append to form element that you want .
document.getElementById("formname").appendChild(input);

This is the only form on the page.

Using some of the examples below, it doesn't work with type=hidden: https://jsfiddle/eLazhj3d/1.

But works with type=text: https://jsfiddle/eLazhj3d/2.

• javascript
• jquery
• css

• Is there only one form in the page? – LcSalazar Commented Nov 5, 2014 at 18:19
• yes - just one form. – 4thSpace Commented Nov 5, 2014 at 18:20

6 Answers 6

Here's a working fiddle (with a visible text field to show):

Using:

document.querySelector("form").appendChild(input);

https://jsfiddle/s55snxtn/

Code: html:

<form action=""><input type="text"/>
</form> 

javascript:

var input = document.createElement("input");

input.setAttribute("type", "text");

input.setAttribute("name", "name_you_want");

input.setAttribute("value", "value_you_want");

//append to form element that you want .
document.querySelector("form").appendChild(input);

Using the document.querySelector() function you can target any element using a css selector base, so in your case:

document.querySelector("form").appendChild(input);

Would get any element that is a form tag.

Query Selector Docs

If you have only one form tag in the page, you can use

document.getElementsByTagName("form")[0];

It will return an array, just get the element in the first index

Using Jquery

$('<input>').attr({
    type: 'hidden',
    id: 'foo',
    name: 'bar',
    value: 'value'
}).appendTo('form');

Try something like:

document.forms[0].appendChild(input);

You can use the getElementsByTagName which returns an array.

If it's the first form on the page would be something like

document.getElementsByTagName('form')[0].appendChild(input);