堆棧內存溢出
  簡體   English   中英

如何將javascript變量值存儲到html輸入值？

[英]How can I store javascript variable value into html input value?

 原文  2013-09-25 07:06:51  1   6    javascript/ jquery/ html

問題描述

這是我的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值存儲到輸入值中？

6 個解決方案

解決方案1
 5  2013-09-25 07:10:24

在隱藏的輸入中添加id="myHiddenField"屬性，在Javascript中，您可以 

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

您顯然不需要jQuery為輸入分配值。

解決方案2
 3  2013-09-25 07:20:39

檢查我的jsfiddle。 添加隱藏在你的html和Javascript中的輸入類型，如下所示

在這里演示 

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

解決方案3
 1  2013-09-25 07:09:54

嘗試這個 

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

解決方案4
 1  2013-09-25 07:15:03

在addRow的末尾添加： 

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

解決方案5
 1  2013-09-25 07:17:59

將您的代碼更改為以下 

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

我故意留下隱藏類型來查看，以便可以查看更改，您可以稍后將其核心化。

解決方案6
 1  2013-09-25 07:22:17

看你可以使用jquery的屬性選擇器： 

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何獲取javascript值並將其存儲到html <input> ？ 我需要在javascript變量中存儲html輸入值並將其顯示在表格中 如何獲取HTML變量的值並將其存儲在javascript變量中？ 當我按下提交按鈕時，如何將值存儲在HTML中 <textarea> 在JavaScript變量中？ 如何將 HTML 表單輸入值存儲到變量？ 我如何定位搜索欄輸入值並將其存儲到變量中以用於 flickr 的 javascript 中的 api 提取 如何在獲得焦點后立即將輸入的值存儲在 javascript 中？ 在 JavaScript 中，如何將對象值數組存儲到字符串變量中？ 如何在 Javascript 中存儲變量的先前值？ 如何將 HTML 輸入中寫入的值轉換為字符串變量？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM