How can I store javascript variable value into html input value?

Question

This is my html code,During this simple code dynamically by pressing + button I can increase number of inputs. Now I want to store allRows.length+1 value into myHiddenField after adding a new input and finally I can see the total number of my inouts html input value, same as below :

<input type="hidden" name="myHiddenField" value="**I want to store allRows.length+1 value here **" />

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Untitled Document</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<meta http-equiv="Content-Script-Type" content="text/javascript"> 
<script type="text/JavaScript"> 
function addRow(r){ 
var root = r.parentNode;//the root 
var allRows = root.getElementsByTagName('tr');//the rows' collection 
var cRow = allRows[0].cloneNode(true)//the clone of the 1st row 
var cInp = cRow.getElementsByTagName('input');//the inputs' collection of the 1st row 
for(var i=0;i<cInp.length;i++){//changes the inputs' names (indexes the names) 
cInp[i].setAttribute('name',cInp[i].getAttribute('name')+'_'+(allRows.length+1)) 
} 
root.appendChild(cRow);//appends the cloned row as a new row 
} 

</script> 
</head> 
<body> 
<form action="" method="get"> 
  <table width="766"  border="0" cellspacing="0" cellpadding="0"> 
   <input type="hidden" name="myHiddenField" value="**I want to store allRows.length+1 value here **" />
    <tr> 
      <td width="191"><input type="text" name="textfield_A" /></td> 

      <td width="191"><input type="text" name="textfield_B" /></td> 

      <td width="286"><input name="button" type="button" value="+" onclick="addRow(this.parentNode.parentNode)"></td> 
    </tr> 
  </table><br /><br /> 
  <input name="" type="submit" value="Submit" /> 
</form> 
</body> 
</html>

How can I solve this issue and store javascript value into an input value through my html form?

mavrosxristoforos · Accepted Answer · 2013-09-25 07:10:24Z

5

Add an id="myHiddenField" attribute in your hidden input and in Javascript, you can just

document.getElementById("myHiddenField").value = allRows.length+1;

You obviously don't need jQuery to assign a value on an input.

answered Sep 25, 2013 at 7:10

mavrosxristoforos

3,6833 gold badges27 silver badges44 bronze badges

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

1 Comment

brelian Over a year ago

Thanks. I could got answer :)

Saranya Sadhasivam · Accepted Answer · 2013-09-25 07:20:39Z

4

Check my jsfiddle. Add input type hidden in your html and in Javascript give like below

DEMO HERE

document.getElementById("myHiddenField").value = allRows.length;

answered Sep 25, 2013 at 7:20

Saranya Sadhasivam

1,3147 silver badges9 bronze badges

Comments

Krasimir · Accepted Answer · 2013-09-25 07:15:03Z

1

At the end of the addRow add:

function addRow(r){ 
    // ...
    // ...
    // ...
    var hiddenInput = document.querySelector("input[name='myHiddenField']");
    hiddenInput.value = document.querySelectorAll("td input[type='text']").length + 1;
}

answered Sep 25, 2013 at 7:15

Krasimir

13.6k4 gold badges45 silver badges58 bronze badges

Comments

Anil kumar · Accepted Answer · 2013-09-25 07:16:56Z

1

TRy this

<input type="hidden" name="myHiddenField" value="**I want to store allRows.length+1 value here **" id="numberOfRows" />

And your script should be like this

function addRow(r){ 
    var root = r.parentNode;//the root 
    var allRows = root.getElementsByTagName('tr');//the rows' collection 
    var cRow = allRows[0].cloneNode(true)//the clone of the 1st row 
    var cInp = cRow.getElementsByTagName('input');//the inputs' collection of the 1st row 
    for(var i=0;i<cInp.length;i++){//changes the inputs' names (indexes the names) 
        cInp[i].setAttribute('name',cInp[i].getAttribute('name')+'_'+(allRows.length+1)) 
    } 
    root.appendChild(cRow);//appends the cloned row as a new row 

    $('#numberOfRows').val($('table tr').length+1);
}

edited Sep 25, 2013 at 7:16

answered Sep 25, 2013 at 7:09

Anil kumar

4,1774 gold badges25 silver badges37 bronze badges

1 Comment

brelian Over a year ago

Can you guide me more? Thanks

Sunil Verma · Accepted Answer · 2013-09-25 07:17:59Z

Change your code to following

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Untitled Document</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<meta http-equiv="Content-Script-Type" content="text/javascript"> 
<script type="text/JavaScript"> 
function addRow(r){
    var currval = document.getElementById('myHiddenField').value;
    var root = r.parentNode;//the root 
    var allRows = root.getElementsByTagName('tr');//the rows' collection 
    var cRow = allRows[0].cloneNode(true)//the clone of the 1st row 
    var cInp = cRow.getElementsByTagName('input');//the inputs' collection of the 1st row 
    for(var i=0;i<cInp.length;i++){//changes the inputs' names (indexes the names) 
        cInp[i].setAttribute('name',cInp[i].getAttribute('name')+'_'+(allRows.length+1)) 
    } 
    root.appendChild(cRow);//appends the cloned row as a new row
    document.getElementById('myHiddenField').value = ++currval;
} 

</script> 
</head> 
<body> 
<form action="" method="get"> 
  <table width="766"  border="0" cellspacing="0" cellpadding="0"> 
   <input type="hiddden" name="myHiddenField" id="myHiddenField" value="1" />
    <tr> 
      <td width="191"><input type="text" name="textfield_A" /></td> 

      <td width="191"><input type="text" name="textfield_B" /></td> 

      <td width="286"><input name="button" type="button" value="+" onclick="addRow(this.parentNode.parentNode)"></td> 
    </tr> 
  </table><br /><br /> 
  <input name="" type="submit" value="Submit" /> 
</form> 
</body> 
</html>

I deliberately left hidden type to view so the changes can be viewed, you can later corect it.

Jai · Accepted Answer · 2013-09-25 07:22:17Z

1

See you can use attribute selector of jquery:

var $hiddenInput = $('input[name="myHiddenField"]'), 
    $rowLenth = $hiddenInput.closest('table tr').length+1;
$hiddenInput.val($rowLenth);

answered Sep 25, 2013 at 7:22

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Collectives™ on Stack Overflow

How can I store javascript variable value into html input value?

6 Answers 6

1 Comment

Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related