從輸入元素中檢索值並存儲在數組中
[英]Retrieving the values from input elements and storing in an array
問題描述
我有一個從用戶那里獲取輸入的表單
<form id='myForm'>
<div id='x'>
<h2> start </h2>
<ul class="rounded">
<li><input type="text" placeholder="text" id="o" /></li>
</ul>
<h2>dests </h2>
<ul class="rounded">
<li><input type="text" placeholder="text" id="d" /></li>
</ul>
<ul class="rounded">
<li><input type="text" placeholder="text" id="d" /></li>
</ul>
</div>
<li class="arrow"><a href="#page2" onclick='function()'>Run </a></li>
</form>
我需要一種從表單中的每個字段獲取用戶輸入並將其放入數組的方法。 我查看了getElementByTagName（'input'），但這會返回一個HTMLCollection對象。 有什么建議么？ （PS我正在使用jqtouch，如果你想知道奇怪的語法是什么）
5 個解決方案
解決方案1
1 2016-12-27 16:48:12
您可以使用Array.prototype.map從querySelectorAll獲取的輸入元素列表中創建數組。
嘗試填寫input s並單擊以下演示中的Run ：
var elements = document.querySelectorAll('#myForm input'); function callme() { var result = Array.prototype.map.call(elements, function(e) { return e.value; }); console.log(result); }
<form id='myForm'> <div id='x'> <h2> start </h2> <ul class="rounded"> <li> <input type="text" placeholder="text" /> </li> </ul> <h2>dests </h2> <ul class="rounded"> <li> <input type="text" placeholder="text" /> </li> </ul> <ul class="rounded"> <li> <input type="text" placeholder="text" /> </li> </ul> </div> <ul> <li class="arrow"><a href="#page2" onclick='callme()'>Run </a> </li> </ul> </form>
解決方案2
0 2016-12-27 16:35:13
嘗試這個：
function getValues() {
var values = []; // Array of input values
var elements = document.querySelectorAll("#myForm input");
for(var i = 0; i < elements.length; i++) {
values.push(elements[i].value);
//If you need the input ID:
//values.push({name: elements[i].id , value: elements[i].value});
}
}
解決方案3
0 2016-12-27 16:38:10
正如其他人提到的那樣小心使用帶有唯一id的html id屬性，即每個輸入都應該有自己的id。
使用vanilla JavaScript， document.getElementsByTagName()返回一個實時html集合 ，您可以使用[index]訪問其成員作為屬性以獲取所需的元素。 然后使用textObject.value訪問輸入的值。
總而言之， document.getElementsByTagName('input')[0].value將提供第一個輸入的值！ 這是邏輯，也檢查片段。
還請考慮以下事項：
-
element.querySelectorAll()通常比element.getElementsByTagName()慢，因為第一個使用文檔節點的深度優先預先遍歷遍歷 -
element.querySelectorAll()返回一個StaticNodeList
我發現這篇文章非常有趣。
function retrieve(){ let list = document.getElementById('inputListContainer'); let input = list.getElementsByTagName('input'); let array = []; for( let i = 0; i < input.length; i++ ){ //input[i].value is the same as document.getElementsByTagName('input')[i].value array.push(input[i].value); } console.log( array ); }
<!DOCTYPE html> <html> <head> </head> <body> <div id='inputListContainer'> <!-- Using a single ul to parent list items. Note that this does not affect the script --> <ul id='inputList' class='rounded'> <li><input type="text" placeholder="one"/></li> <li><input type="text" placeholder="two"/></li> <li><input type="text" placeholder="three"/></li> </ul> <button onclick='retrieve()'>Retrieve</button> </div> </body> </html>
解決方案4
0 2016-12-27 16:51:23
為此你可以使用Document.querySelectorAll（）
返回與指定的選擇器組匹配的文檔中的元素列表（使用文檔節點的深度優先預先遍歷遍歷）。 返回的對象是NodeList 。
使用document.querySelectorAll("#myForm input"); 將使用myForm的ID定位表單中的所有輸入。
然后使用for（）循環遍歷集合並將input值推送到數組中。
for語句創建一個循環，該循環由三個可選表達式組成，括在括號中並用分號分隔，后跟一個在循環中執行的語句（通常是一個塊語句）。
for ([initialization]; [condition]; [final-expression]) statement
function BuildArray() { var myArray = []; var input = document.querySelectorAll("#myForm input"); for (var i = 0; i < input.length; i++) { myArray.push(input[i].value); } console.log(myArray); }
<form id='myForm'> <div id='x'> <h2> start </h2> <ul class="rounded"> <li> <input type="text" placeholder="text" id="o" value="first" /> </li> </ul> <h2>dests </h2> <ul class="rounded"> <li> <input type="text" placeholder="text" id="d" value="second" /> </li> </ul> <ul class="rounded"> <li> <input type="text" placeholder="text" id="d" value="third" /> </li> </ul> </div> <li class="arrow"><a href="#page2" onclick='BuildArray()'>Run </a> </li> </form>
如果ID是必需的，我還建議保持ID的唯一性，但是對於這個任務， ID不在選擇器中使用，所以如果ID相同則沒有問題。
如果您對上述源代碼有任何疑問，請在下面留言，我會盡快給您回復。
我希望這有幫助。 快樂的編碼！
解決方案5
-1 2016-12-27 16:35:59
您只需迭代每個輸入並將每個值推送到一個數組中。 你可以在點擊時調用這樣的東西。 請參閱此處的jQuery示例。
function click() {
var arr = [];
$.each($('input'), function(k,v) {
arr.push($(v).val());
})
console.log(arr);
}
選中復選框時，將值存儲在數組中並從數組中檢索
[英]Storing values in array and retrieving from array when checkbox is checked
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.