Question

这是我的html代码，通过按 + 按钮动态显示这个简单的代码，我可以增加输入的数量。现在我想在添加新输入后将 allRows.length + 1 值存储到 myHiddenField 中，最后我可以看到我的inouts html输入值的总数，如下所示：

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

如何通过我的html表单解决此问题并将javascript值存储到输入值中？

Answer 1

在隐藏的输入中添加id="myHiddenField"属性，在Javascript中，您可以

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

您显然不需要jQuery为输入分配值。

Answer 2

检查我的jsfiddle。添加隐藏在您的html中的输入类型，并在Javascript中给出如下所示

DEMO HERE

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

Answer 3

试试这个

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

你的脚本应该是这样的

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

Answer 4

在 addRow 的末尾添加：

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

Answer 5

将您的代码更改为以下

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

我故意留下隐藏类型进行查看，以便可以查看更改，您可以稍后将其核心化。

Answer 6

看你可以使用jquery的属性选择器：

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

如何将javascript变量值存储到html输入值？

6 个答案: