2008-10-04 38 views
27

我要循環的HTML表單的元件,並且<輸入>字段的值存儲在一個對象。下面的代碼無法正常工作,但:循環以上元素jQuery中

function config() { 
    $("#frmMain").children().map(function() { 
     var child = $("this"); 
     if (child.is(":checkbox")) 
      this[child.attr("name")] = child.attr("checked"); 
     if (child.is(":radio, checked")) 
      this[child.attr("name")] = child.val(); 
     if (child.is(":text")) 
      this[child.attr("name")] = child.val(); 
     return null; 
    }); 

無論做以下(由jobscry的回答啓發):

function config() { 
    $("#frmMain").children().each(function() { 
     var child = $("this"); 
     alert(child.length); 
     if (child.is(":checkbox")) { 
      this[child.attr("name")] = child.attr("checked"); 
     } 
     if (child.is(":radio, checked")) 
      this[child.attr("name")] = child.val(); 
     if (child.is(":text")) 
      this[child.attr("name")] = child.val(); 
    }); 
} 

警報總是顯示child.length == 0。手動選擇元素的作品:

  
>>> $("#frmMain").children() 
Object length=42 
>>> $("#frmMain").children().filter(":checkbox") 
Object length=3 

有關如何正確執行循環的任何提示?

+0

你的線程剛纔救我20分鐘線通過多種形式線路輸入字段-_- ;. +1。 – zeboidlund 2011-11-28 18:22:40

回答

40

不認爲你需要對這個報價:

var child = $("this"); 

嘗試:

var child = $(this); 
+2

哇好趕 - 我沒注意到 – Hugoware 2008-10-04 12:53:52

+0

謝謝!現在它爲我工作。 – 2008-10-04 13:09:55

28

jQuery有一個很好的功能,通過一組元素的循環:.each()

$('#formId').children().each(
    function(){ 
     //access to form element via $(this) 
    } 
); 
+0

不適用於我,請參閱我對該問題的編輯。更多的想法? – 2008-10-04 12:23:14

+0

該表單可能會有一段或類似其子項。您需要確保只選擇輸入元素。 – SpoonMeiser 2008-10-04 18:00:45

+0

「children()」獲取表單中的所有DOM子元素,而不是元素。 – mpemburn 2013-11-01 14:13:11

13

取決於你需要每個孩子(如果你想通過AJA發佈到某個地方X)你可以做...

$("#formID").serialize() 

它會爲你自動創建一個字符串,所有的值。

至於循環對象,你也可以這樣做。

$.each($("input, select, textarea"), function(i,v) { 
    var theTag = v.tagName; 
    var theElement = $(v); 
    var theValue = theElement.val(); 
}); 
3

我已經使用了以下前:

var my_form = $('#form-id'); 
var data = {}; 

$('input:not([type=checkbox]), input[type=checkbox]:selected, select, textarea', my_form).each(
    function() { 
     var name = $(this).attr('name'); 
     var val = $(this).val(); 

     if (!data.hasOwnProperty(name)) { 
      data[name] = new Array; 
     } 

     data[name].push(val); 
    } 
); 

這是剛剛從內存中寫的,所以可能有錯誤,但是這應該使一個物體被稱爲data包含所有的輸入值。

請注意,您必須以特殊方式處理複選框,以避免獲取未經檢查的複選框的值。無線電輸入可能也是如此。

另請注意,使用數組來存儲值,對於一個輸入名稱,您可能具有來自多個輸入(特別是複選框)的值。

0

,如果你想使用各項功能,它應該是這樣的:

$('#formId').children().each( 
    function(){ 
    //access to form element via $(this) 
    } 
); 

只需切換出關花括號的密切括號。謝謝你指出,工作,你爲我節省了一些時間。

0

對我來說,所有這些都不起作用。對我而言有效的事情很簡單:

$("#formID input[type=text]").each(function() { 
alert($(this).val()); 
}); 
-1

這是循環訪問僅表單元素的表單的最簡單方法。在每個函數內部,你可以檢查和建立任何你想要的。構建對象時,請注意您將要在每個函數之外聲明它。

編輯 JSFIDDLE

下面將工作

$('form[name=formName]').find('input, textarea, select').each(function() { 
    alert($(this).attr('name')); 
});