フォームのフィールドと値を持つオブジェクトを作成するにはどうすればよいですか?
このように:
{
fields:
{
name: 'foo',
email: '[email protected]',
comment: 'wqeqwtwqtqwtqwet'
}
}
フォームが次のようになっていると想定します。
<form>
<input type="text" name="name" value="foo" />
<input type="text" name="email" value="[email protected]" />
<textarea name="comment">wqeqwtwqtqwtqwet</textarea>
</form>
特定のフォームだけでなく、単一の関数を持つすべてのフォームでこれを行う方法を知る必要があります。
あなたはこれを行うことができます:
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フォーム内のフィールドのorderは重要な場合があります。 (これらは両方とも serializeArray
が機能する理由です。)
通常のHTMLの慣例では、無効なフィールドを省略することに注意してください。これを行う場合は、値を取得する前にthis.disabled
を確認してください。
上記(2年前に記述)ではjQuery疑似セレクターを使用していることに注意してください。私がそれを書いたことを知って少し驚いています。 :input
疑似セレクタのドキュメント で述べているように、これを使用すると、jQueryはセレクタをブラウザのネイティブquerySelectorAll
(ほぼすべてブラウザは今持っています)。
今日私はおそらく書くでしょう:
$("#theForm").find("input, textarea, select, button")...
...ボタンが必要な場合、または必要ない場合
$("#theForm").find("input, textarea, select")...
...次に、each
内のinput[type="button"]
およびinput[type="submit"]
を除外します。例えば。 (ボタンなし):
$("#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`...
}
});
var inputs = $("form :input");
var obj = $.map(inputs, function(x, y) {
return {
Key: x.name,
Value: $(x).val()
};
});
console.log(obj);
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()
を使用できます。
jqueryには、$( '#myform')。serialize()のようなfromsにserialize()関数があります
これはあなたが探しているものですか?
更新:おっと、おそらく代わりにserializeArray()を試してください。名前と値の配列が表示されます。
ここに簡単な解決策があります:
$(".form-sample").serializeArray().map(function(x){data[x.name] = x.value;});
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;
}
これは、ページ内の各フォームのオブジェクトを作成する一般化された関数です
場合によっては機能しない複雑な方法がたくさんあります。その間、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);
まさにあなたが望むものです。すべてを処理します。
このように、複数の選択またはチェックボックスのグループからすべての値をキャッチします
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;
};
シンプルなフォームコード
<form id="myForm" name="myForm">
<input type="text" name="email" value="[email protected]"/>
<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 "password": data[element[i].name] = element[i].checked; break;
case "textarea": data[element[i].name] = element[i].value; break;
}
}
冗長要素セレクターを使用しない場合は、送信イベントハンドラー関数内からFormData
にアクセスできます。以下のコードスニペットが印刷されます 。
function submitForm(formElement) {
const formData = new FormData(formElement)
const allEntries = [...formData.entries()]
.reduce((all, entry) => {
all[entry[0]] = entry[1]
return all
}, {})
console.log(allEntries)
return false;
}
<form onsubmit="return submitForm(this)">
<input name="searchTerm">
<input name="includeBananas" type="checkbox">
<button>Submit</button>
</form>
そのため、私は常にフォーム送信の間にラッパーを配置しようとします。
これは、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」のクラスを持つすべてのフォームをラップし、そのフォームのすべての値のオブジェクトを返すobjectify formと呼ばれる関数にserializeArrayを送信します。
function objectifyForm(formArray) {
returnArray = {};
for (var i = 0; i < formArray.length; i++) {
returnArray[formArray[i]['name']] = formArray[i]['value'];
}
return returnArray;
}