獲取具有相同名稱的表單輸入

Question

<form id="file-upload"> 
    <input type="text" name="title[]" placeholder="Title"> 
    <input type="text" name="alt[]" placeholder="Alt"> 
    <input type="text" name="keywords[]" placeholder="Keywords"> 

    <input type="text" name="title[]" placeholder="Title"> 
    <input type="text" name="alt[]" placeholder="Alt"> 
    <input type="text" name="keywords[]" placeholder="Keywords"> 
    //etc 
</form> 

我的表單具有許多具有相同名稱的字段。我希望通過JS中的表單，獲得標題，關鍵字和alt值並將它們附加到我的表單數據對象，然後將我的圖像添加到formData對象，並保存圖像加上它的元數據服務器側。

我的問題是關於獲取表單輸入值。是最好的seralize的形式，或者只是循環通過dom元素？我怎樣才能做到這一點？

所以我需要：

1. 獲得的第一個冠軍，ALT，關鍵字字段 - 怎麼樣？
2. 附加到formData，並將文件發送到服務器 - 我可以做這個位。
3. 獲取第二個標題，alt，關鍵字字段 - 如何？
4. 附加到formData，並將文件發送到服務器 - 我可以做這個位。

等等...

Answer 1

document.getElementsByName("title[]");返回所有匹配元素的陣列。然後通過索引得到第一，第二等。

document.getElementsByName("title[]")[0]; // first title 

https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByName

在jQuery中，這工作得很好：

var firstTitle = $("[name='title[]']")[0].value; 

雖然你一定要緩存選擇：

var titles = $("[name='title[]']"); 
var firstTitle = titles[0].value; 
var secondTitle = titles[1].value; 

Answer 2

我做了一些挖掘和創造了這個小提琴。希望能幫助到你。

var values = $("input[name='title\\[\\]']").map(function(){return $(this).val();}).get(); 

$("<div>title[0]:"+values[0]+"</div>").appendTo('#results'); 
$("<div>title[1]:"+values[1]+"</div>").appendTo('#results'); 
$("<div>title[2]:"+values[2]+"</div>").appendTo('#results'); 

http://jsfiddle.net/y5n8A/

Answer 3

http://api.jquery.com/jquery.map/

嘗試使用（圖）功能，這是爲了讓一個數組