JavaScript/jQueryを使ってフォームデータを取得する方法を教えてください。
従来のHTMLのみの方法でフォームを送信する場合のように、フォームのデータを簡単に1行で取得する方法はありますか。
たとえば、
<form>
<input type="radio" name="foo" value="1" checked="checked" />
<input type="radio" name="foo" value="0" />
<input name="bar" value="xxx" />
<select name="this">
<option value="hi" selected="selected">Hi</option>
<option value="ho">Ho</option>
</form>
でる：
{
"foo": "1",
"bar": "xxx",
"this": "hi"
}
テキストエリア、選択、ラジオボタン、チェックボックスが（正しく）含まれていないため、このようなものは単純すぎます。
$("#form input").each(function() {
data[theFieldName] = theFieldValue;
});
$('form').serialize() //this produces: "foo=1&bar=xxx&this=hi"
$('form').serializeArray() を使用すると、 配列 が返されます。
[
{"name":"foo","value":"1"},
{"name":"bar","value":"xxx"},
{"name":"this","value":"hi"}
]
他のオプションは $('form').serialize() で、 文字列 を返します。
"foo=1&bar=xxx&this=hi"
2014年の回答を更新しました： HTML5 FormData これをします
var formData = new FormData(document.querySelector('form'))
これで、formDataをそのままそのまま送信できます。フォームに使用されているすべての名前と値が含まれます。
jQuery.serializeArray に基づき、キーと値のペアを返します。
var data = $('#form').serializeArray().reduce(function(obj, item) {
obj[item.name] = item.value;
return obj;
}, {});
document.querySelector('form').addEventListener('submit', (e) => {
const formData = new FormData(e.target);
// Now you can use formData.get('foo'), for example.
// Don't forget e.preventDefault() if you want to stop normal form .submission
});
これは厄介な答えですが、なぜこれがより良い解決策であるかを説明させてください。
ボタンを押すのではなく、フォーム送信を適切に処理しています。プッシュを好む人もいます。一部の人々は、音声入力または他のアクセシビリティ装置などの代替の入力装置を使用する。送信フォームを処理し、あなたは正しくそれを皆のために解決します。
実際に送信されたフォームのフォームデータを調べます。後でフォームセレクタを変更した場合は、すべてのフィールドのセレクタを変更する必要はありません。さらに、同じ入力名を持つ複数のフォームがあるかもしれません。過剰なIDと曖昧さをなくす必要はありません。送信されたフォームに基づいて入力を追跡するだけです。これにより、複数のフォームに対して単一のイベントハンドラを使用することもできます if これは、状況に適しています。
FormDataインターフェースはかなり新しいものですが、ブラウザーによって十分にサポートされています。フォームにあるものの本当の価値を得るためにそのデータコレクションを構築するのは素晴らしい方法です。それがなければ、すべての要素（
form.elementsなど）をループして、何がチェックされているか、何がチェックされていないか、値が何であるかなどを把握する必要があります。 FormDataインターフェースはより単純です。私はここでES6を使用しています...決して必要条件ではありませんので、古いブラウザサポートが必要な場合はES5互換になるように戻してください。
.serializeArray（）を使用してデータを配列形式で取得し、それをオブジェクトに変換します。
function getFormObj(formId) {
var formObj = {};
var inputs = $('#'+formId).serializeArray();
$.each(inputs, function (i, input) {
formObj[input.name] = input.value;
});
return formObj;
}
これはJqueryを必要としない、とてもシンプルで短い解決策です。
var formElements=document.getElementById("myForm").elements;
var postData={};
for (var i=0; i<formElements.length; i++)
if (formElements[i].type!="submit")//we dont want to include the submit-buttom
postData[formElements[i].name]=formElements[i].value;
$('#myform').serialize();
私はこれを使う：
jQueryプラグイン
(function($){
$.fn.getFormData = function(){
var data = {};
var dataArray = $(this).serializeArray();
for(var i=0;i<dataArray.length;i++){
data[dataArray[i].name] = dataArray[i].value;
}
return data;
}
})(jQuery);
HTMLフォーム
<form id='myform'>
<input name='myVar1' />
<input name='myVar2' />
</form>
データを入手する
var myData = $("#myForm").getFormData();
$("#form input, #form select, #form textarea").each(function() {
data[theFieldName] = theFieldValue;
});
それ以外に、 serialize（） を見た方がよいかもしれません。
これは、チェックボックス、ラジオボタン、およびスライダー（おそらく他の入力タイプも正しく処理しますが、私はこれらをテストしただけです）を正しく処理する、実用的なJavaScriptのみの実装です。
function setOrPush(target, val) {
var result = val;
if (target) {
result = [target];
result.Push(val);
}
return result;
}
function getFormResults(formElement) {
var formElements = formElement.elements;
var formParams = {};
var i = 0;
var elem = null;
for (i = 0; i < formElements.length; i += 1) {
elem = formElements[i];
switch (elem.type) {
case 'submit':
break;
case 'radio':
if (elem.checked) {
formParams[elem.name] = elem.value;
}
break;
case 'checkbox':
if (elem.checked) {
formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
}
break;
default:
formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
}
}
return formParams;
}
作業例：
function setOrPush(target, val) {
var result = val;
if (target) {
result = [target];
result.Push(val);
}
return result;
}
function getFormResults(formElement) {
var formElements = formElement.elements;
var formParams = {};
var i = 0;
var elem = null;
for (i = 0; i < formElements.length; i += 1) {
elem = formElements[i];
switch (elem.type) {
case 'submit':
break;
case 'radio':
if (elem.checked) {
formParams[elem.name] = elem.value;
}
break;
case 'checkbox':
if (elem.checked) {
formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
}
break;
default:
formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
}
}
return formParams;
}
//
// Boilerplate for running the snippet/form
//
function ok() {
var params = getFormResults(document.getElementById('main_form'));
document.getElementById('results_wrapper').innerHTML = JSON.stringify(params, null, ' ');
}
(function() {
var main_form = document.getElementById('main_form');
main_form.addEventListener('submit', function(event) {
event.preventDefault();
ok();
}, false);
})();<form id="main_form">
<div id="questions_wrapper">
<p>what is a?</p>
<div>
<input type="radio" required="" name="q_0" value="a" id="a_0">
<label for="a_0">a</label>
<input type="radio" required="" name="q_0" value="b" id="a_1">
<label for="a_1">b</label>
<input type="radio" required="" name="q_0" value="c" id="a_2">
<label for="a_2">c</label>
<input type="radio" required="" name="q_0" value="d" id="a_3">
<label for="a_3">d</label>
</div>
<div class="question range">
<label for="a_13">A?</label>
<input type="range" required="" name="q_3" id="a_13" min="0" max="10" step="1" list="q_3_dl">
<datalist id="q_3_dl">
<option value="0"></option>
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5"></option>
<option value="6"></option>
<option value="7"></option>
<option value="8"></option>
<option value="9"></option>
<option value="10"></option>
</datalist>
</div>
<p>A and/or B?</p>
<div>
<input type="checkbox" name="q_4" value="A" id="a_14">
<label for="a_14">A</label>
<input type="checkbox" name="q_4" value="B" id="a_15">
<label for="a_15">B</label>
</div>
</div>
<button id="btn" type="submit">OK</button>
</form>
<div id="results_wrapper"></div>編集：
もっと完全な実装を探しているなら、 を見てください。このプロジェクトのこのセクションでは、 を使っています。私は思いついた完全な解決策でこの質問を最終的に更新するつもりですが、多分これは誰かに役立つでしょう。
あなたがjQueryを使っているなら、ここにあなたが探していることをするだろう小さな関数があります。
まず、あなたのフォームにIDを追加します（それがページ上の唯一のフォームでない限り、domクエリとして 'form'を使用できます）。
<form id="some-form">
<input type="radio" name="foo" value="1" checked="checked" />
<input type="radio" name="foo" value="0" />
<input name="bar" value="xxx" />
<select name="this">
<option value="hi" selected="selected">Hi</option>
<option value="ho">Ho</option>
</form>
<script>
//read in a form's data and convert it to a key:value object
function getFormData(dom_query){
var out = {};
var s_data = $(dom_query).serializeArray();
//transform into simple data/value object
for(var i = 0; i<s_data.length; i++){
var record = s_data[i];
out[record.name] = record.value;
}
return out;
}
console.log(getFormData('#some-form'));
</script>
出力は次のようになります。
{
"foo": "1",
"bar": "xxx",
"this": "hi"
}
それは2019年であり、これを行うためのより良い方法があります：
const form = document.querySelector('form');
const data = new URLSearchParams(new FormData(form).entries());
または、代わりにプレーンなオブジェクトが必要な場合
const form = document.querySelector('form');
const data = Object.fromEntries(new FormData(form).entries());
ただし、同じ名前の複数選択および重複チェックボックスから取得するような重複キーでは機能しません。
FormData Objectsを使用することもできます。 FormDataオブジェクトを使用すると、XMLHttpRequestを使用して送信する一連のキー/値ペアをコンパイルできます。主にフォームデータの送信に使用することを目的としていますが、キー付きデータを送信するためにフォームとは別に使用できます。
var formElement = document.getElementById("myform_id");
var formData = new FormData(formElement);
console.log(formData);
var formData = new FormData($('#form-id'));
params = $('#form-id').serializeArray();
$.each(params, function(i, val) {
formData.append(val.name, val.value);
});
私はまた必要な目的を返すために答えを含めました。
function getFormData(form) {
var rawJson = form.serializeArray();
var model = {};
$.map(rawJson, function (n, i) {
model[n['name']] = n['value'];
});
return model;
}
この関数 を使うと、フォームのオブジェクトまたはJSONを使用できます。
それを使うために：
var object = formService.getObjectFormFields("#idform"); function getObjectFormFields(formSelector)
{
/// <summary>Função que retorna objeto com base nas propriedades name dos elementos do formulário.</summary>
/// <param name="formSelector" type="String">Seletor do formulário</param>
var form = $(formSelector);
var result = {};
var arrayAuxiliar = [];
form.find(":input:text").each(function (index, element)
{
var name = $(element).attr('name');
var value = $(element).val();
result[name] = value;
});
form.find(":input[type=hidden]").each(function (index, element)
{
var name = $(element).attr('name');
var value = $(element).val();
result[name] = value;
});
form.find(":input:checked").each(function (index, element)
{
var name;
var value;
if ($(this).attr("type") == "radio")
{
name = $(element).attr('name');
value = $(element).val();
result[name] = value;
}
else if ($(this).attr("type") == "checkbox")
{
name = $(element).attr('name');
value = $(element).val();
if (result[name])
{
if (Array.isArray(result[name]))
{
result[name].Push(value);
} else
{
var aux = result[name];
result[name] = [];
result[name].Push(aux);
result[name].Push(value);
}
} else
{
result[name] = [];
result[name].Push(value);
}
}
});
form.find("select option:selected").each(function (index, element)
{
var name = $(element).parent().attr('name');
var value = $(element).val();
result[name] = value;
});
arrayAuxiliar = [];
form.find("checkbox:checked").each(function (index, element)
{
var name = $(element).attr('name');
var value = $(element).val();
result[name] = arrayAuxiliar.Push(value);
});
form.find("textarea").each(function (index, element)
{
var name = $(element).attr('name');
var value = $(element).val();
result[name] = value;
});
return result;
}これはすべてのフォームフィールドをJavaScriptオブジェクト "res"に追加します。
var res = {};
$("#form input, #form select, #form textarea").each(function(i, obj) {
res[obj.name] = $(obj).val();
})
function getFormData($form){
var unindexed_array = $form.serializeArray();
var indexed_array = {};
$.map(unindexed_array, function(n, i){
if(indexed_array[n['name']] == undefined){
indexed_array[n['name']] = [n['value']];
}else{
indexed_array[n['name']].Push(n['value']);
}
});
return indexed_array;
}
私はこの問題を解決するためにライブラリを書きました： JSONForms 。フォームを取り、各入力を調べて、簡単に読み取れるJSONオブジェクトを作成します。
次のような形式だとしましょう。
<form enctype='application/json'>
<input name='places[0][city]' value='New York City'>
<input type='number' name='places[0][population]' value='8175133'>
<input name='places[1][city]' value='Los Angeles'>
<input type='number' name='places[1][population]' value='3792621'>
<input name='places[2][city]' value='Chicago'>
<input type='number' name='places[2][population]' value='2695598'>
</form>
フォームをJSONFormsのencodeメソッドに渡すと、次のオブジェクトが返されます。
{
"places": [
{
"city": "New York City",
"population": 8175133
},
{
"city": "Los Angeles",
"population": 3792621
},
{
"city": "Chicago",
"population": 2695598
}
]
}
こちらが demo あなたのフォームです。
Neurontの応答に基づいて、フォームデータをキーと値のペアで取得する簡単なJQueryメソッドを作成しましたが、複数選択やname = 'example []'の配列入力に対して機能します。
これはどのように使われているかです：
var form_data = $("#form").getFormObject();
あなたはその定義とそれがどのように働くかの例を以下に見つけることができます。
// Function start
$.fn.getFormObject = function() {
var object = $(this).serializeArray().reduce(function(obj, item) {
var name = item.name.replace("[]", "");
if ( typeof obj[name] !== "undefined" ) {
if ( !Array.isArray(obj[name]) ) {
obj[name] = [ obj[name], item.value ];
} else {
obj[name].Push(item.value);
}
} else {
obj[name] = item.value;
}
return obj;
}, {});
return object;
}
// Function ends
// This is how it's used
$("#getObject").click( function() {
var form_data = $("#form").getFormObject();
console.log(form_data);
});/* Only to make view better ;) */
#getObject {
padding: 10px;
cursor:pointer;
background:#0098EE;
color:white;
display:inline-block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<form id="form">
<input type="text" name="text" value="Hola amigo" />
<input type="text" name="text_array[]" value="Array 1" />
<input type="text" name="text_array[]" value="Array 2" />
<input type="text" name="text_array[]" value="Array 3" />
<select name="multiselect" multiple>
<option name="option1" selected> option 1 </option>
<option name="option2" selected> option 2 </option>
</select>
<input type="checkbox" name="checkbox" value="checkbox1" checked/>
<input type="checkbox" name="checkbox" value="checkbox2" checked/>
<input type="radio" name="radio" value="radio1" checked/>
<input type="radio" name="radio" value="radio2"/>
</form>
<div id="getObject"> Get object (check the console!) </div>ページを更新せずにフォームを送信し、ファイルを含むすべての値を取得するためのフォーム入力要素フィールドと入力ファイルの表示
<form id="imageUploadForm" action="" method="post" enctype="multipart/form-data">
<input type="text" class="form-control" id="fname" name='fname' placeholder="First Name" >
<input type="text" class="form-control" name='lname' id="lname" placeholder="Last Name">
<input type="number" name='phoneno' class="form-control" id="phoneno" placeholder="Phone Number">
<textarea class="form-control" name='address' id="address" rows="5" cols="5" placeholder="Your Address"></textarea>
<input type="file" name="file" id="file" >
<input type="submit" id="sub" value="Registration">
</form>$('#imageUploadForm').on('submit',(function(e)
{
fname = $('#fname').val();
lname = $('#lname').val();
address = $('#address').val();
phoneno = $('#phoneno').val();
file = $('#file').val();
e.preventDefault();
var formData = new FormData(this);
formData.append('file', $('#file')[0]);
formData.append('fname',$('#fname').val());
formData.append('lname',$('#lname').val());
formData.append('phoneno',$('#phoneno').val());
formData.append('address',$('#address').val());
$.ajax({
type:'POST',
url: "test.php",
//url: '<?php echo base_url().'edit_profile/edit_profile2';?>',
data:formData,
cache:false,
contentType: false,
processData: false,
success:function(data)
{
alert('Data with file are submitted !');
}
});
}))$(form).serializeArray().reduce(function (obj, item) {
if (obj[item.name]) {
if ($.isArray(obj[item.name])) {
obj[item.name].Push(item.value);
} else {
var previousValue = obj[item.name];
obj[item.name] = [previousValue, item.value];
}
} else {
obj[item.name] = item.value;
}
return obj;
}, {});
それは問題を解決します：複数選択では動作できませんでした。
私は複数のチェックボックスと複数の選択を処理する関数を書きました。そのような場合、それは配列を返します。
function getFormData(formId) {
return $('#' + formId).serializeArray().reduce(function (obj, item) {
var name = item.name,
value = item.value;
if (obj.hasOwnProperty(name)) {
if (typeof obj[name] == "string") {
obj[name] = [obj[name]];
obj[name].Push(value);
} else {
obj[name].Push(value);
}
} else {
obj[name] = value;
}
return obj;
}, {});
}
あなたは皆、完全には正しくありません。書くことはできません：
formObj[input.name] = input.value;
これは、複数選択リストがある場合の方法です - "param1"： "value1"、 "param1"： "value2"として送信されるため、その値は最後のもので上書きされます。
したがって、正しい方法は次のとおりです。
if (formData[input.name] === undefined) {
formData[input.name] = input.value;
}
else {
var inputFieldArray = $.merge([], $.isArray(formData[input.name]) ? formData[input.name] : [formData[input.name]]);
$.merge(inputFieldArray, [input.value]);
formData[input.name] = $.merge([], inputFieldArray);
}
この方法はそれをするべきです。フォームデータをシリアル化してからオブジェクトに変換します。チェックボックスのグループも扱います。
function getFormObj(formId) {
var formParams = {};
$('#' + formId)
.serializeArray()
.forEach(function(item) {
if (formParams[item.name]) {
formParams[item.name] = [formParams[item.name]];
formParams[item.name].Push(item.value)
} else {
formParams[item.name] = item.value
}
});
return formParams;
}
これは私がオブジェクトとしてフォームデータを抽出するために書いたNice Vanilla JS関数です。オブジェクトに追加を挿入したり、フォーム入力フィールドをクリアしたりするためのオプションもあります。
const extractFormData = ({ form, clear, add }) => {
return [].slice.call(form.children).filter(node => node.nodeName === 'INPUT')
.reduce((formData, input) => {
const value = input.value
if (clear) { input.value = '' }
return {
...formData,
[input.name]: value
}
}, add)
}
これが投稿リクエストでの使用例です。
submitGrudge(e) {
e.preventDefault()
const form = e.target
const add = { id: Date.now(), forgiven: false }
const grudge = extractFormData({ form, add, clear: true })
// grudge = {
// "name": "Example name",
// "offense": "Example string",
// "date": "2017-02-16",
// "id": 1487877281983,
// "forgiven": false
// }
fetch('http://localhost:3001/api/grudge', {
method: 'post',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(grudge)
})
.then(response => response.json())
.then(grudges => this.setState({ grudges }))
.catch(err => console.log('error: ', err))
}