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

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"  ".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?

<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?

Share Improve this question edited Sep 25, 2013 at 7:08 Antony 15.1k10 gold badges47 silver badges75 bronze badges asked Sep 25, 2013 at 7:06 brelian 5032 gold badges15 silver badges31 bronze badges

Add a comment |

6 Answers 6

Sorted by: Reset to default 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.

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

DEMO HERE

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

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;
}

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);
}

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.

See you can use attribute selector of jquery:

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

jquery - How can I store javascript variable value into html input value? - Stack Overflow

6 Answers 6

与本文相关的文章

评论列表(0)