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

这是我的html代码，在这段简单的代码中按+按钮动态按钮，我可以增加输入的数量。现在，我想存储allRows.length + 1价值为myHiddenField添加新的输入之后，终于我可以看到我inouts HTML的输入值，下同总数：如何将javascript变量值存储到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值存储到输入值中？

来源

2013-09-25 brelian

试试这个

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

来源

2013-09-25 07:09:54

你可以指导我吗？谢谢 – brelian

看到我的更新。 @brelian –

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

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

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

来源

2013-09-25 07:10:24 mavrosxristoforos

谢谢。我可以得到答案:) – brelian

在addRow添加结束：

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

来源

2013-09-25 07:15:03 Krasimir

更改您的代码如下

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

我故意留下隐患类型，以查看这样的变化可以看到，您可以在以后核心它。

来源

2013-09-25 07:17:59

感谢您的回复:) – brelian

我的快乐brelian :) –

检查我的jsfiddle。添加输入型藏在你的HTML和Javascript中给像下面

DEMO HERE

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

来源

2013-09-25 07:20:39

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

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

来源

2013-09-25 07:22:17 Jai

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

回答

相关问题