Pass a javascript variable value into input type hidden value

JavascriptHtml

Javascript Problem Overview


I would like to assign value of product of two integer numbers into a hidden field already in the html document. I was thinking about getting the value of a javascript variable and then passing it on a input type hidden. I'm having a hard time to explain but this is how it should work:

Script Example

 <script type="text/javascript">
 function product(a,b){
      return a*b;
 }
 </script>

above computes the product and i want the product to be in hidden field.

<input type="hidden" value="[return value from product function]">

How is this possible?

Javascript Solutions


Solution 1 - Javascript

You could give your hidden field an id:

<input type="hidden" id="myField" value="" />

and then when you want to assign its value:

document.getElementById('myField').value = product(2, 3);

Make sure that you are performing this assignment after the DOM has been fully loaded, for example in the window.load event.

Solution 2 - Javascript

if you already have that hidden input :

function product(a, b) {
   return a * b;
}
function setInputValue(input_id, val) {
    document.getElementById(input_id).setAttribute('value', val);
}

if not, you can create one, add it to the body and then set it's value :

function addInput(val) {
    var input = document.createElement('input');
    input.setAttribute('type', 'hidden');
    input.setAttribute('value', val);
    document.body.appendChild(input);
}

And then you can use(depending on the case) :

addInput(product(2, 3)); // if you want to create the input
// or
setInputValue('input_id', product(2, 3)); 

Solution 3 - Javascript

You could do that like this:

<script type="text/javascript">
     function product(a,b)
     {
     return a*b;
     }
    document.getElementById('myvalue').value = product(a,b);
 </script>
    
 <input type="hidden" value="THE OUTPUT OF PRODUCT FUNCTION" id="myvalue">

Solution 4 - Javascript

Hidden Field :

<input type="hidden" name="year" id="year">

Script :

<script type="text/javascript">
     var year = new Date();
	 document.getElementById("year").value=(year.getFullYear());
</script>

Solution 5 - Javascript

Check out this jQuery page for some interesting examples of how to play with the value attribute, and how to call it:

http://api.jquery.com/val/

Otherwise - if you want to use jQuery rather than javascript in passing variables to an input of any kind, use the following to set the value of the input on an event click(), submit() et al:

on some event; assign or set the value of the input:

$('#inputid').val($('#idB').text());

where:

<input id = "inputid" type = "hidden" />

<div id = "idB">This text will be passed to the input</div>

Using such an approach, make sure the html input does not already specify a value, or a disabled attribute, obviously.

Beware the differences betwen .html() and .text() when dealing with html forms.

Solution 6 - Javascript

add some id for an input

var multi = product(2,3);
document.getElementById('id').value=multi;

Solution 7 - Javascript

<script type="text/javascript">
  function product(x,y)
  {
   return x*y;
  }
 document.getElementById('myvalue').value = product(x,y);
 </script>

 <input type="hidden" value="THE OUTPUT OF PRODUCT FUNCTION" id="myvalue">

Solution 8 - Javascript

//prompts for input in javascript
test=prompt("Enter a value?","some string");

//passes javascript to a hidden field.
document.getElementById('myField').value = test;

//prompts for input in javascript
test2=prompt("Enter a value?","some string2");

//passes javascript to a hidden field
document.getElementById('myField').value = test2;

//prints output
document.write("hello, "+test+test2;

now this is confusing but this should work...

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionKaHeLView Question on Stackoverflow
Solution 1 - JavascriptDarin DimitrovView Answer on Stackoverflow
Solution 2 - Javascriptgion_13View Answer on Stackoverflow
Solution 3 - JavascriptJarrett WidmanView Answer on Stackoverflow
Solution 4 - Javascript151291View Answer on Stackoverflow
Solution 5 - JavascriptcollygView Answer on Stackoverflow
Solution 6 - JavascriptsimoncereskaView Answer on Stackoverflow
Solution 7 - JavascriptnitinView Answer on Stackoverflow
Solution 8 - Javascriptwilliam dunlapView Answer on Stackoverflow