Create a hidden field in JavaScript

Question

How do you create a hidden field in JavaScript into a particular form ?

    <html>
    <head>
      <script type="text/javascript">
      var a =10;
function test() {
      if (a ==10)  {
        //  ... Here i need to create some hidden field for form named = chells
      }
}
      </script>  
    </head>   
    <body >
      <form id="chells" name="formsdsd">
      <INPUT TYPE=BUTTON OnClick="test();">
     </form> 
    </body>
    </html>

Since your script is running before the form exists - what you want is impossible. You could write it in a function and assign it to the onload event though. Your HTML has some errors too, see validator.w3.org — Quentin
– Quentin, Commented Jun 16, 2009 at 11:14

5 revs, 5 users 47% · Accepted Answer · 2009-06-16 11:13:34Z

183

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("chells").appendChild(input);

edited Jun 16, 2009 at 11:13

community wiki

5 revs, 5 users 47%
Haim Evgi

Sign up to request clarification or add additional context in comments.

7 Comments

annakata Over a year ago

The forms collection is more appropriate than getElementById for a named form and this all depends on the execution order of the JS vs the DOM loading, but essentially this is the right approach

joe Over a year ago

But i just try to use its said the form element is null

annakata Over a year ago

As David pointed out, make sure you are executing this after the DOM has loaded. Try using the onload event for starters.

joe Over a year ago

at the same point .. document.chells is working but document.getElementById(chells) return null . What would be problem . How to reslove this

joe Over a year ago

I found the Issue .. Its Difference between name and id

|

Shreeyansh Jain · Accepted Answer · 2013-06-11 08:48:40Z

32

You can use jquery for create element on the fly

$('#form').append('<input type="hidden" name="fieldname" value="fieldvalue" />');

or other way

$('<input>').attr({
    type: 'hidden',
    id: 'fieldId',
    name: 'fieldname'
}).appendTo('form')

answered Jun 11, 2013 at 8:48

Shreeyansh Jain

1,52515 silver badges25 bronze badges

Comments

jaybro · Accepted Answer · 2017-02-06 16:05:18Z

8

I've found this to work:

var element1 = document.createElement("input");
element1.type = "hidden";
element1.value = "10";
element1.name = "a";
document.getElementById("chells").appendChild(element1);

answered Feb 6, 2017 at 16:05

jaybro

1,5931 gold badge15 silver badges25 bronze badges

Comments

Nimrod · Accepted Answer · 2022-08-24 12:57:57Z

1

insertAdjacentHTML does the trick, and is probably the easiest way, query for the parent, and then just ask to insert before the end, or after the beginning as you see fit, i.e:

document.querySelector('#chells').insertAdjacentHTML('beforeend',
  "<input type='hidden' name='status' value='true' />")

edited Aug 24, 2022 at 12:57

answered Jul 25, 2022 at 9:53

Nimrod

4223 silver badges9 bronze badges

1 Comment

Saeed Zhiany Over a year ago

Please read How do I write a good answer?. While this code block may answer the OP's question, this answer would be much more useful if you explain how this code is different from the code in the question, what you've changed, why you've changed it and why that solves the problem without introducing others.

SivolcC · Accepted Answer · 2018-12-06 06:08:10Z

You can use this method to create hidden text field with/without form. If you need form just pass form with object status = true.

You can also add multiple hidden fields. Use this way:

CustomizePPT.setHiddenFields( 
    { 
        "hidden" : 
        {
            'fieldinFORM' : 'thisdata201' , 
            'fieldinFORM2' : 'this3' //multiple hidden fields
            .
            .
            .
            .
            .
            'nNoOfFields' : 'nthData'
        },
    "form" : 
    {
        "status" : "true",
        "formID" : "form3"
    } 
} );

var CustomizePPT = new Object();
CustomizePPT.setHiddenFields = function(){ 
    var request = [];
	var container = '';
	console.log(arguments);
	request = arguments[0].hidden;
    console.log(arguments[0].hasOwnProperty('form'));
	if(arguments[0].hasOwnProperty('form') == true)
	{
		if(arguments[0].form.status == 'true'){
			var parent = document.getElementById("container");
			container = document.createElement('form');
			parent.appendChild(container);
			Object.assign(container, {'id':arguments[0].form.formID});
		}
	}
	else{
		 container = document.getElementById("container");
	}
	
	//var container = document.getElementById("container");
	Object.keys(request).forEach(function(elem)
	{
		if($('#'+elem).length <= 0){
			console.log("Hidden Field created");
			var input = document.createElement('input');
			Object.assign(input, {"type" : "text", "id" : elem, "value" : request[elem]});
			container.appendChild(input);
		}else{
			console.log("Hidden Field Exists and value is below" );
			$('#'+elem).val(request[elem]);
		}
	});
};

CustomizePPT.setHiddenFields( { "hidden" : {'fieldinFORM' : 'thisdata201' , 'fieldinFORM2' : 'this3'}, "form" : {"status" : "true","formID" : "form3"} } );
CustomizePPT.setHiddenFields( { "hidden" : {'withoutFORM' : 'thisdata201','withoutFORM2' : 'this2'}});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='container'>

</div>

Collectives™ on Stack Overflow

Create a hidden field in JavaScript

5 Answers 5

7 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related