從輸入元件中檢索值和在陣列

我有一種形式，需要從用戶從輸入元件中檢索值和在陣列

<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對象。有什麼建議麼？（P.S我使用jqtouch如果你想知道這是怎麼回事用怪異的語法）

來源

2016-12-27 Dansmith12

我看到你有兩個輸入相同的'ID'。 'id'應該是獨一無二的，你到目前爲止還有哪些嘗試？你的javsascript在哪裏用這個？ – NewToJS

你有幾個元素具有相同的ID –

正如他們在評論中提到的，你有幾個控件具有相同的ID。您可以嘗試下面的代碼行。 var inputControls = $（'＃myForm'）。find（'input [type = text]'）; var inputArray = []; （inputControls，function（index，value）{var inputValue = $（item）.val（）; inputArray.push（inputValue）; }）; –

試試這個：

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

來源

2016-12-27 16:35:13

如果我是你，我會交換'getElementsByTagName（'input'）;'用'document.querySelectorAll（「＃myForm input」）;否則這將從頁面獲得所有輸入。 OP希望從表單中獲取所有輸入。 – NewToJS

好的！謝謝@NewToJS –

非常歡迎，你的原始答案是非常接近的，所以比我提交相同，但有一個小的改變我認爲這將更容易發表評論:)說實話，我會添加一些信息關於使用'querySelectorAll ）'和一個工作片段。看到演示和詳細的答案似乎更受重視。如果你選擇不更新你的答案，我會提交一個細節。 – NewToJS

-1

你只需要通過每個輸入迭代每個值推到一個數組。點擊後你會這樣稱呼。看到這裏的jQuery示例。

function click() { 
    var arr = []; 

    $.each($('input'), function(k,v) { 
     arr.push($(v).val()); 
    }) 

    console.log(arr); 
}

來源

2016-12-27 16:35:59 jlemm45

** jQuery **未在此問題中標記。 – NewToJS

正如其他人所提到的，要小心使用具有唯一ID的html id屬性，即每個輸入都應有自己的id。

使用香草JavaScript，document.getElementsByTagName()返回實時html collection，您可以使用[index]訪問其成員作爲屬性來獲取所需的元素。然後使用textObject.value訪問輸入的值。

總而言之，document.getElementsByTagName('input')[0].value將提供第一個輸入的值！這是邏輯，也檢查片段。

也請考慮以下幾點：

element.querySelectorAll()通常比element.getElementsByTagName()慢，作爲第一個使用文檔節點的深度優先前序遍歷
element.querySelectorAll()回報StaticNodeList

我發現這個article對這個主題很有意思。

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>

來源

2016-12-27 16:38:10 giannisl9

可以使用Array.prototype.map創建從querySelectorAll獲得的輸入元素列表的陣列。

嘗試填充input S和點擊下面的演示運行：

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>

來源

2016-12-27 16:48:12 kukkuz

爲此，您可以使用Document.querySelectorAll()

返回元素的列表（使用深度優先遍歷文檔的n odes）與指定的選擇器組相匹配。返回的對象是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是相同的。

如果您對上述源代碼有任何疑問，請在下面留言，我會盡快回復您。

我希望這會有所幫助。快樂的編碼！

來源

2016-12-27 16:51:23 NewToJS

從輸入元件中檢索值和在陣列

回答

相關問題