HTML輸入數組：如何獲得HTML輸入數組值使用javascript

Question

我有這樣的代碼工作正常!:

<script> 
 
function get(userfirstname, userlastname){ 
 
\t alert(userfirstname); 
 

 
\t return false; 
 
} 
 
</script> 
 

 
<form action="" method="POST"> 
 
    <input type="text" name="userfirstname"> 
 
    <input type="text" name="userlastname"> 
 
    <input type="submit" onclick="return get(userfirstname.value, userlastname.value);"> 
 
</form>

我試圖用一個數組想趕輸入值這樣的：

<script> 
 
function get(user){ 
 
\t alert(user["firstname"].value); 
 

 
\t return false; 
 
} 
 
</script> 
 

 
<form action="" method="POST"> 
 
    <input type="text" name="user[firstname]"> 
 
    <input type="text" name="user[lastname]"> 
 
    <input type="submit" onclick="return get(user);"> 
 
</form>

我嘗試了很多不同的場景，沒有點:(

任何提示，將不勝感激。

Answer 1

你可以簡單地針對form元素的onclick處理程序中，查詢所有input元素，在它們之間迭代和構建array你正在尋找。

下面是一個例子，你可以做什麼來建立一個持有每個輸入元素名稱和值的對象數組，除了禁用一次和提交元素。

function get(evt){ 
 
    var fields = []; 
 
    event.target.parentElement 
 
    .querySelectorAll('input:not([disabled]):not([type="submit"])').forEach(function(e) { 
 
    fields.push({name: e.name, value: e.value}); 
 
    }) 
 
    console.log(fields); 
 
    return false; 
 
}

<form> 
 
    <input type="text" name="firstname" placeholder="Name"><br> 
 
    <input type="text" name="lastname" placeholder="Surename"><br> 
 
    <input type="text" name="foo" value="foo will be excluded" disabled><br> 
 
    <input type="submit" onclick="return get();"> 
 
</form>

Answer 2

一個jQuery的方法來得到這個

function get(){ 
    var fields = []; 
    var arr = $('form').not('input[type="submit"]').find('input[type="text"]') 
    $(arr).each(function(i,val){ 
     fields.push({name:$(val).attr('name'),value:$(val).val()}) 
    }) 
} 

你不能。在JS，你必須讓他們中的對象要做到這一點