フォームのシリアル化に少し問題があります
<form>
<input type="text" name="name1" value="value1"/>
<input type="text" name="name2" value="value2"/>
</form>
$(form).serializeArray()
[{name:"name1",value:"value1"},{name:"name2",value:"value2"}]ペアを返します。
フォームで出力を取得することは可能ですか？
{name1:value1,name2:value2}
扱いやすくするために？
var result = { };
$.each($('form').serializeArray(), function() {
result[this.name] = this.value;
});
// at this stage the result object will look as expected so you could use it
alert('name1 = ' + result.name1 + ', name2 = ' + result.name2);
$.fn.serializeObject = function () {
var o = {};
var a = this.serializeArray();
$.each(a, function () {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
フォームにチェックボックスやラジオボタンがない場合、受け入れられた回答はうまく機能します。これらのグループはすべて同じname属性を持っているため、オブジェクト内に配列値を作成する必要があります。したがって、次のようなhtmlの場合：
<input type="checkbox" value="1" name="the-checkbox">
<input type="checkbox" value="2" name="the-checkbox">
<input type="checkbox" value="3" name="the-checkbox">
あなたが得るでしょう：
{the-checkbox:['1', '2', '3']}
このコードはすべてをうまく処理します。
/*!
* jQuery serializeObject - v0.2 - 1/20/2010
* http://benalman.com/projects/jquery-misc-plugins/
*
* Copyright (c) 2010 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
*/
// Whereas .serializeArray() serializes a form into an array, .serializeObject()
// serializes a form into an (arguably more useful) object.
(function($,undefined){
'$:nomunge'; // Used by YUI compressor.
$.fn.serializeObject = function(){
var obj = {};
$.each( this.serializeArray(), function(i,o){
var n = o.name,
v = o.value;
obj[n] = obj[n] === undefined ? v
: $.isArray( obj[n] ) ? obj[n].concat( v )
: [ obj[n], v ];
});
return obj;
};
})(jQuery);
使用法
$(form).serializeObject();
new_obj = {}
$.each($(form).serializeArray(), function(i, obj) { new_obj[obj.name] = obj.value })
あなたのデータはnew_objにあります
.reduce()これは、割り当てを使用して破棄するだけで簡単に実行できます。
const arr = $('form').serializeArray(); // get the array
const data = arr.reduce((acc, {name, value}) => ({...acc, [name]: value}),{}); // form the object
例：
$('form').on('submit', function(e) {
e.preventDefault(); // only used for example (so you can see output in console);
const arr = $(this).serializeArray(); // get the array
const data = arr.reduce((acc, {name, value}) => ({...acc, [name]: value}),{}); // form the object
console.log(data);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="text" placeholder="username" name="username"/>
<input type="email" placeholder="email" name="email"/>
<input type="submit" />
</form>または、それをサポートできる場合は、さらに簡単にObject.fromEntries()なります。.map()
例：
$('form').on('submit', function(e) {
e.preventDefault(); // only used for example (so you can see output in console);
const arr = $(this).serializeArray(); // get the array
const data = Object.fromEntries(arr.map(({name, value}) => [name, value]));
console.log(data);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="text" placeholder="username" name="username"/>
<input type="email" placeholder="email" name="email"/>
<input type="submit" />
</form>カスタム関数を作成できます。
var complex = $(form).serialize(); // name1=value1&name2=value2
var json = toSimpleJson(complex); // {"name1":"value1", "name2":"value2"}
function toSimpleJson(serializedData) {
var ar1 = serializedData.split("&");
var json = "{";
for (var i = 0; i<ar1.length; i++) {
var ar2 = ar1[i].split("=");
json += i > 0 ? ", " : "";
json += "\"" + ar2[0] + "\" : ";
json += "\"" + (ar2.length < 2 ? "" : ar2[1]) + "\"";
}
json += "}";
return json;
}
これがホリスターのコードのいくつかの近代化です。
(function($,undefined){
'$:nomunge'; // Used by YUI compressor.
$.fn.serializeObject = function(){
var obj = {},
names = {};
$.each( this.serializeArray(), function(i,o){
var n = o.name,
v = o.value;
if ( n.includes( '[]' ) ) {
names.n = !names.n ? 1 : names.n+1;
var indx = names.n - 1;
n = n.replace( '[]', '[' + indx + ']' );
}
obj[n] = obj[n] === undefined ? v
: $.isArray( obj[n] ) ? obj[n].concat( v )
: [ obj[n], v ];
});
return obj;
};
})(jQuery);
チェックボックスのようにフィールド名が必要な場合myvar[]。
これが、ラジオボタンと複数選択をサポートする私のソリューションです。
var data = $('#my_form').serializeArray().reduce(function (newData, item) {
// Treat Arrays
if (item.name.substring(item.name.length - 2) === '[]') {
var key = item.name.substring(0, item.name.length);
if(typeof(newData[key]) === 'undefined') {
newData[key] = [];
}
newData[key].push(item.value);
} else {
newData[item.name] = item.value;
}
return newData;
}, {});
console.log(data);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my_form">
<select name="muli_select[]" multiple="multiple">
<option value="1" selected>Value 1</option>
<option value="2" selected>Value 2</option>
<option value="3">Value 3 Not selected</option>
</select>
<br>
<input name="my_text" type="hidden" value="Hidden Text"/>
<input name="my_text2" type="text" value="Shown Text"/>
<br>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female
</form>フォームにid（form-id）を付けます
var jsoNform = $("#form-id").serializeObject();
jQuery.fn.serializeObject = function () {
var formData = {};
var formArray = this.serializeArray();
for (var i = 0, n = formArray.length; i < n; ++i)
formData[formArray[i].name] = formArray[i].value;
return formData;
};
値を持つフォーム入力のみを取得するには...
var criteria = $(this).find('input, select').filter(function () {
return ((!!this.value) && (!!this.name));
}).serializeArray();
基準：{名前： "LastName"、値： "smith"}
NickParsonsのsnippedを使用して何かを追加します。
(function($,undefined){
$.fn.serializeObject = function(){
return this.serializeArray()
.reduce((acc, {name, value}) => ({...acc, [name]: value}),{});
};
})(jQuery);
他の例では、同じ名前のフィールドを上書きすることはできませんでした。「serializeArray」がそれを処理し、ニックのスニップはそれをさらに良く機能させました。