Como posso obter dados de formulário com JavaScript / jQuery?
Existe uma maneira simples e de uma linha de obter os dados de um formulário como seria se fosse submetido apenas em HTML clássico?
por exemplo, em:
<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>
fora:
{
"foo": "1",
"bar": "xxx",
"this": "hi"
}
algo assim é demasiado simples, uma vez que não inclui (correctamente) áreas de texto, selecciona, botões de rádio e caixas de controlo:
$("#form input").each(function() {
data[theFieldName] = theFieldValue;
});
25 answers
$('form').serialize() //this produces: "foo=1&bar=xxx&this=hi"
Utilizar $('form').serializeArray(), o que devolve uma lista :
[
{"name":"foo","value":"1"},
{"name":"bar","value":"xxx"},
{"name":"this","value":"hi"}
]
Outra opção é:$('form').serialize(), o que devolve um texto :
"foo=1&bar=xxx&this=hi"
Com base em jQuery.serializeArray, devolve pares de valores-chave.
var data = $('#form').serializeArray().reduce(function(obj, item) {
obj[item.name] = item.value;
return obj;
}, {});
Resposta actualizada para 2014: HTML5 FormData Faz isto
var formData = new FormData(document.querySelector('form'))
Você pode então postar formData exatamente como ele é-ele contém todos os nomes e valores usados na forma.
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
});
Esta é uma resposta impertinente, mas deixe-me explicar porque é que esta é uma solução melhor:
Estamos a lidar bem com um formulário, submete-te em vez de carregar num botão. Algumas pessoas gostam de empurrar entrar nos campos. Algumas pessoas usam dispositivos de entrada alternativos, como entrada de voz ou outros dispositivos de acessibilidade. Manuseie o formulário submeter e você resolvê-lo corretamente para todos.
Estamos a investigar os dados do formulário para o formulário que foi enviado. Se mudar seu seletor de formulário mais tarde, você não tem que mudar os seletores para todos os campos. Além disso, você pode ter vários formulários com os mesmos nomes de entrada. Não há necessidade de desambiguar com IDs excessivos e o que não, apenas rastrear as entradas com base na forma que foi apresentado. Isto também lhe permite usar um único manipulador de eventos para múltiplos formulários se for apropriado para a sua situação.
A interface FormData é bastante nova, mas é bem suportada por navegadores. É ... uma ótima maneira de construir essa coleta de dados para obter os valores reais do que está na forma. Sem ele, você vai ter que percorrer todos os elementos (como com
form.elements) e descobrir o que é verificado, o que não é, quais são os valores, etc. Totalmente possível se você precisar de suporte de navegador antigo, mas a interface FormData é mais simples.Estou a usar o ES6... não é um requisito de qualquer forma, então mude de volta para ser compatível com o ES5 se você precisar de navegador antigo suportar.
Utilizar .serializeArray () para obter os dados em formato de matriz e, em seguida, convertê - lo em um objeto:
function getFormObj(formId) {
var formObj = {};
var inputs = $('#'+formId).serializeArray();
$.each(inputs, function (i, input) {
formObj[input.name] = input.value;
});
return formObj;
}
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();
$("#form input, #form select, #form textarea").each(function() {
data[theFieldName] = theFieldValue;
});
Eu uso isto:
'Plugin' De 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);
Formulário HTML
<form id='myform'>
<input name='myVar1' />
<input name='myVar2' />
</form>
Obter os dados
var myData = $("#myForm").getFormData();
Aqui está uma implementação somente em JavaScript que lida corretamente com checkboxes, botões de rádio e sliders (provavelmente outros tipos de entrada também, mas eu só testei estes).
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;
}
Exemplo de trabalho:
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>Editar:
Se está à procura de uma implementação mais completa, veja esta secção do projecto para a qual fiz isto. Vou actualizar esta pergunta eventualmente com a completa a solução que eu inventei, mas talvez isto seja útil para alguém.Se você está usando jQuery, aqui está uma pequena função que fará o que você está procurando.
Primeiro, adicione um ID ao seu formulário (a menos que seja o único formulário na página, então você pode apenas usar 'form' como a consulta dom) {[[4]}
<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>
A saída pareceria como:
{
"foo": "1",
"bar": "xxx",
"this": "hi"
}
Você também pode usar os objectos FormData ; o objecto FormData permite-lhe compilar um conjunto de pares de chaves/valores para enviar usando o XMLHttpRequest. O seu principal objectivo é o envio de dados do formulário, mas pode ser utilizado independentemente dos formulários, a fim de transmitir dados riscados.
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);
});
Isto irá adicionar todos os campos de formulários ao objecto 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;
}
Pode usar esta função para ter um objecto ou um JSON da forma.
Para utilização:
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;
}Nem todos estão totalmente correctos. Você não pode escrever:
formObj[input.name] = input.value;
Porque desta forma se você tem multiselect lista - os respectivos valores serão substituídos com o último, já que é transmitida como: "param1" : "valor1", "param1" : "valor2".
Então, a abordagem correcta é:
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);
}
Eu escrevi uma biblioteca para resolver este problema: JSONForms. Ele toma uma forma, passa por cada entrada e constrói um objeto JSON que você pode ler facilmente.
Diga que tem a seguinte forma:
<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>
Passar o formulário para o método de codificação do JSONForms devolve-lhe o seguinte objecto:
{
"places": [
{
"city": "New York City",
"population": 8175133
},
{
"city": "Los Angeles",
"population": 3792621
},
{
"city": "Chicago",
"population": 2695598
}
]
}
Aqui estádemo com a sua forma.
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;
}, {});
}
Mostrar os campos do elemento de entrada do formulário e o ficheiro de entrada para enviar o seu formulário sem actualizar a página e obter todos os valores com o ficheiro incluí-lo aqui é
<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 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;
}
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)
}
Aqui está um exemplo do seu uso com um pedido post:
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))
}
<form id="my-form">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name">
</div>
<div>
<label for="mail">E-mail:</label>
<input type="email" id="mail" name="user_mail">
</div>
<div>
<label for="msg">Message:</label>
<textarea id="msg" name="user_message"></textarea>
</div>
<div>
<label for="gender">Gender:</label>
<select name="gender" id="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<div>
<label for="terms">Accept terms:</label>
<input type="checkbox" id="terms" name="terms">
</div>
<div class="button">
<button type="submit">Send your message</button>
</div>
</form>
<script>
document.getElementById('my-form')
.addEventListener('submit', e => {
e.preventDefault()
let fields = e.target.querySelectorAll('input,textarea,select')
let cbs = e.target.querySelectorAll('input[type=checkbox]')
let values = {}
fields.forEach(e => {
values[e.name] = e.value
})
cbs.forEach(e => {
values[e.name] = e.checked
})
console.log(values)
})
</script>