jQuery從表單字段創建對象

Question

如何用表單的字段和值創建對象？

像這樣的：

{ 
    fields: 
    { 
     name: 'foo', 
     email: 'foo@moo.com', 
     comment: 'wqeqwtwqtqwtqwet'  

    } 
} 

假設形式如下：

<form> 
    <input type="text" name="name" value="foo" /> 
    <input type="text" name="email" value="foo@moo.com" /> 
    <textarea name="comment">wqeqwtwqtqwtqwet</textarea> 
</form> 

我需要知道我能做到這一點對於任何形式的單一功能，而不是某一特定形成。

Answer 1

你可以這樣做：

var fields = {}; 
$("#theForm").find(":input").each(function() { 
    // The selector will match buttons; if you want to filter 
    // them out, check `this.tagName` and `this.type`; see 
    // below 
    fields[this.name] = $(this).val(); 
}); 
var obj = {fields: fields}; // You said you wanted an object with a `fields` property, so... 

當心形式可以有重複名稱的字段，而你所要做的並不支持這一點。此外，HTML表單中字段的訂單可能很重要。 （這兩個原因都是serializeArray的工作方式。）

請注意，正常的HTML做法是省略禁用的字段。如果您想這樣做，請在抓取該值之前檢查this.disabled。

---

請注意，上述（兩年前寫）使用jQuery僞選擇器。我有點驚訝地發現我寫了這個。正如它在documentation for the :input pseudo-selector中所述，使用它意味着jQuery無法將選擇器切換到瀏覽器的原生querySelectorAll（幾乎所有瀏覽器都有）。

現在我可能會寫：

$("#theForm").find("input, textarea, select, button")... 

...如果我想要的按鈕，或者如果沒有則

$("#theForm").find("input, textarea, select")... 

......然後過濾掉input[type="button"]和input[type="submit"]內each 。例如。（無按鍵都）：

$("#theForm").find("input, textarea, select").each(function() { 
    var inputType = this.tagName.toUpperCase() === "INPUT" && this.type.toUpperCase(); 
    if (inputType !== "BUTTON" && inputType !== "SUBMIT") { 
     // ...include it, either it's an `input` with a different `type` 
     // or it's a `textarea` or a `select`... 
    } 
}); 

Answer 2

jQuery有一個連載於320交織像 $（ '＃myForm的'）（）函數。序列（）

這是你在找什麼？

更新： oops，也許嘗試serializeArray（），而應該給你一個名稱和值的數組。

Answer 3

var inputs = $("form :input"); 
var obj = $.map(inputs, function(x, y) { 
    return { 
     Key: x.name, 
     Value: $(x).val() 
    }; 
}); 
console.log(obj); 

Answer 4

function formsToObj(){ 
    var forms = []; 
    $('form').each(function(i){ 
     forms[i] = {}; 
     $(this).children('input,textarea,select').each(function(){ 
      forms[i][$(this).attr('name')] = $(this).val(); 
     }); 
    }); 
    return forms; 
} 

這是一個廣義的功能，在你的頁面會爲每個窗體對象

Answer 5

由於每http://api.jquery.com/serializeArray/頁面上的評論，你可以這樣做：

(function($){ 
    $.fn.serializeJSON=function() { 
     var json = {}; 
     jQuery.map($(this).serializeArray(), function(n, i){ 
      json[n['name']] = n['value']; 
     }); 
     return json; 
    }; 
})(jQuery); 

然後做：

var obj = $('form').serializeJSON(); 

，或者如果你需要它您的fields屬性，您可以修改該功能或執行此操作：

var obj = {fields: $('form').serializeJSON()}; 

或者如果您不介意輸出格式，則可以使用serializeArray()。

Answer 6

所以我總是試圖在表單提交中放置一個包裝。

這對於運行在ajax上的表單提交尤其重要。

首先要做的是抓住提交時的表單。

$(".ajax-form").submit(function(){ 
    var formObject = objectifyForm($(this).serializeArray()); 
    // Do stuff with formObject 

    // always add return false to stop the form from actually doing a post anywhere 
    return false; 
}); 

這將包裹任何形式的有一類「Ajax的形式」，併發送serializeArray到一個被稱爲客觀化形式將返回所有形式的值的目標函數。

function objectifyForm(formArray) { 
    returnArray = {}; 
    for (var i = 0; i < formArray.length; i++) { 
     returnArray[formArray[i]['name']] = formArray[i]['value']; 
    } 
    return returnArray; 
} 

Answer 7

這樣你趕上所有值從多個選擇或複選框組

function form2obj(form) { 
    var arr = $(form).serializeArray(), obj = {}; 
    for(var i = 0; i < arr.length; i++) { 
     if(obj[arr[i].name] === undefined) { 
      obj[arr[i].name] = arr[i].value; 
     } else { 
      if(!(obj[arr[i].name] instanceof Array)) { 
       obj[arr[i].name] = [obj[arr[i].name]]; 
      } 
      obj[arr[i].name].push(arr[i].value); 
     } 
    } 
    return obj; 
}; 

Answer 8

簡單的表單代碼

<form id="myForm" name="myForm"> 
    <input type="text" name="email" value="fazelman@test.com"/> 
    <input type="checkbox" name="gender"> 
    <input type="password" name="pass" value="123"/> 
    <textarea name="message">Enter Your Message Her</textarea> 
</form> 

JavaScript代碼：

var data = {}; 
var element = document.getElementById("form").elements 
for (var i = 0; i < element.length; i++) { 
    switch (element[i].type) { 
     case "text": data[element[i].name] = element[i].value; break; 
     case "checkbox": data[element[i].name] = element[i].checked; break; 
     case "passwrod": data[element[i].name] = element[i].checked; break; 
     case "textarea": data[element[i].name] = element[i].value; break; 
    } 
}