23

フォームのフィールドと値を使用してオブジェクトを作成するにはどうすればよいですか？

このように：

{
  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>

特定のフォームだけでなく、単一の関数を持つ任意のフォームに対してこれを行う方法を知る必要があります。

4

11 に答える 11

39

あなたはこれを行うことができます：

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、値を取得する前にも確認してください。

上記（2年前に書かれた）はjQuery疑似セレクターを使用していることに注意してください。私がそれを書いたことに少し驚いています。疑似セレクターのドキュメントに記載され:inputているように、これを使用すると、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`...
    }
});
于 2011-04-09T05:41:45.200 に答える
11 
var inputs = $("form :input");
var obj = $.map(inputs, function(x, y) {
    return {
        Key: x.name,
        Value: $(x).val()
    };
});
console.log(obj);
于 2011-04-09T05:38:53.467 に答える
6

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()、その出力形式を気にしない場合に使用できます。

于 2011-04-09T05:43:39.703 に答える
3

jqueryには、$（'＃myform'）。serialize（）のようなfromsのserialize（）関数があります

これはあなたが探しているものですか？

更新：おっと、代わりにserializeArray（）を試してみてください。名前と値の配列が得られるはずです。

于 2011-04-09T05:37:38.047 に答える
1 
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;
}

これは、ページ内のフォームごとにオブジェクトを作成する一般化された関数です。

于 2011-04-09T05:40:20.573 に答える
1

このようにして、複数の選択またはチェックボックスのグループからすべての値を取得します

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;
};
于 2016-03-31T01:54:20.337 に答える
1

場合によってはうまくいかない複雑な方法がたくさんあります。それまでの間、FormData を使用できます

 var fields = {};
 var myform = document.getElementById('ThisIsTheIDOfMyForm');
 var myformdata = new FormData(myform);
 for (var [key, value] of myformdata.entries()) { 
    fields[key] = value;
 }
 console.log(fields);

まさにあなたが望むものです。それはすべてを処理します。

于 2018-12-13T13:57:42.917 に答える
0

だから私はいつもフォーム送信の間にラッパーを入れようとします.

これは、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-form」のクラスを持つ任意のフォームをラップし、serializeArray をオブジェクト化フォームと呼ばれる関数に送信します。この関数は、そのフォームのすべての値のオブジェクトを返します。

function objectifyForm(formArray) {
    returnArray = {};
    for (var i = 0; i < formArray.length; i++) {
        returnArray[formArray[i]['name']] = formArray[i]['value'];
    }
    return returnArray;
}
于 2014-07-23T15:14:54.120 に答える