如何將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輸入值中？

回答

相關問題