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>
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);
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>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' />")