jQuery如何從多個相似的輸入字段構建JSON數組？

我有下面的HTML代碼。我想獲得第一個地址，然後爲每個additionalAddress(x)構建一個漂亮的數組，以便我可以將它們插入到數據庫中。這是一個jQuery append邏輯的所有部分，所以地址可以是無限的。jQuery如何從多個相似的輸入字段構建JSON數組？

<div class="controls" id="Locations"> 

<input class="span7" type="text" placeholder="Full Address" id="Address" style="margin: 0px 5px 5px 0;"><br> 
<input class="span3" type="text" placeholder="(555) 555-5555" id="Phone" name="Phone" onkeyup="drawPhone(this);" style="margin: 0px 5px 5px 0;"> 
<input class="span4" type="text" placeholder="[email protected]" id="Email" onkeyup="drawEmail(this);"> <i class="icon-plus-sign" id="addAddress"></i> 

<span id="additionalAddress1"><br><br> 
    <input class="span7" type="text" placeholder="Full Address" id="Address1"><br><input class="span3" type="text" placeholder="(555) 555-5555" id="Phone1" name="Phone"><input class="span4" type="text" placeholder="[email protected]" id="Email1" > <i class="icon-minus-sign" id="removeAddress"></i></span> 

<span id="additionalAddress2"><br><br><input class="span7" type="text" placeholder="Full Address" id="Address2"><br><input class="span3" type="text" placeholder="(555) 555-5555" id="Phone2" name="Phone"><input class="span4" type="text" placeholder="[email protected]" id="Email2" style="margin: -4px 0px 0 11px;"> <i class="icon-minus-sign" id="removeAddress"></i></span> 

<span id="additionalAddress3"><br><br><input class="span7" type="text" placeholder="Full Address" id="Address3"><br><input class="span3" type="text" placeholder="(555) 555-5555" id="Phone3" name="Phone"><input class="span4" type="text" placeholder="[email protected]" id="Email3"> <i class="icon-minus-sign" id="removeAddress"></i></span> 

</div>

來源

2013-08-22 user1157800

這個問題是否真的需要所有'內聯樣式'？此外，你有多個'＃地址' –

ID必須是**唯一的** – Andreas

你不能使用一個ID爲不同的元素。你可以使用'name'或'class'屬性。 –

var address = new Array(); 
$("#Locations").find('span[id^="additionalAddress"]').each(function() { 
    var temp = " " + $(this).find("input[id^='Address']").val(); 
    address.push(temp); 
}); 
alert(address);

參見demo

來源

2013-08-22 06:34:25

我將如何獲得相應地址的電話和電子郵件？ – user1157800

@ user1157800看到這個：http://jsfiddle.net/arvind07/fBj7t/ –

如果額外地址的數量是固定的，則可以使用

[ 
    $("#Address").val(), 
    $("#additionalAddress1 > input").val(), 
    $("#additionalAddress2 > input").val(), 
    $("#additionalAddress3 > input").val() 
]

假設你除去additionalAddressX跨度內的input元素的ID。

[編輯]如果它是不固定的，你可以使用：

var addresses = [$("#Address").val()]; 
$("span[id^='additionalAddress'] > input[id^='Address']").each(function(i,e) { 
    addresses.push($(e).val()); 
});

假設additionalAddressX跨度內input元素有ID喜歡AddressX。

來源

2013-08-22 06:36:21

額外的地址將不會被修復 – user1157800

我編輯我的答案據此。 –

事情看起來很棒。我將如何將各自的電子郵件地址和電話號碼添加到其他地址，並有一個數組來保持「獨立」？ – user1157800

jQuery如何從多個相似的輸入字段構建JSON數組？

回答

相關問題