jQuery 如何将 javascript 变量值存储到 html 输入值中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18998392/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I store javascript variable value into html input value?
提问by brelian
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+1value into myHiddenFieldafter adding a new input and finally I can see the total number of my inouts html input value, same as below :
这是我的 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>
How can I solve this issue and store javascript value into an input value through my html form?
如何解决此问题并通过我的 html 表单将 javascript 值存储到输入值中？
回答by mavrosxristoforos
Add an id="myHiddenField"attribute in your hidden input and in Javascript, you can just
id="myHiddenField"在隐藏输入和 Javascript 中添加一个属性，您可以
document.getElementById("myHiddenField").value = allRows.length+1;
You obviously don't need jQuery to assign a value on an input.
您显然不需要 jQuery 来为输入分配值。
回答by Saranya Sadhasivam
回答by Anil kumar
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);
}
回答by Krasimir
At the end of the addRowadd:
在addRow的末尾添加：
function addRow(r){
// ...
// ...
// ...
var hiddenInput = document.querySelector("input[name='myHiddenField']");
hiddenInput.value = document.querySelectorAll("td input[type='text']").length + 1;
}
回答by Sunil Verma
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.
我特意留下了隐藏类型以供查看，以便可以查看更改，您可以稍后对其进行修正。
回答by Jai
See you can use attribute selector of jquery:
看你可以使用jquery的属性选择器：
var $hiddenInput = $('input[name="myHiddenField"]'),
$rowLenth = $hiddenInput.closest('table tr').length+1;
$hiddenInput.val($rowLenth);
