Javascript 使用jQuery获取表单输入字段?
我有一个有许多输入字段的表单Javascript 使用jQuery获取表单输入字段?,javascript,jquery,Javascript,Jquery,我有一个有许多输入字段的表单 当我用jQuery捕获提交表单事件时,是否可以在关联数组中获取该表单的所有输入字段?关联?不需要一些工作,但您可以使用通用选择器: var items = new Array(); $('#form_id:input').each(function (el) { items[el.name] = el; }); 多亏了Simon_Weaver的提示,这里有另一种方法,您可以使用: 请注意,此代码段将在元素上失败 在jQuery版本1.3中,似乎无法使用s
当我用jQuery捕获提交表单事件时,是否可以在关联数组中获取该表单的所有输入字段?关联?不需要一些工作,但您可以使用通用选择器:
var items = new Array();
$('#form_id:input').each(function (el) {
items[el.name] = el;
});
多亏了Simon_Weaver的提示,这里有另一种方法,您可以使用:
请注意,此代码段将在元素上失败
在jQuery版本1.3中,似乎无法使用serializeArray。这适用于1.4版+
$('#myForm').bind('submit', function () {
var elements = this.elements;
});
elements变量将包含表单中的所有输入、选择、文本区域和字段集。在这个问题上晚了一点,但这更容易:
$('#myForm').submit(function() {
// Get all the forms elements and their values in one step
var values = $(this).serialize();
});
这个插件可能会帮助其他人找到最终解决这个问题的方法。我不确定它是否能直接满足你的需求
还有一个函数。当我需要对所有表单字段进行ajax调用时,我遇到了以下问题:输入选择器返回所有复选框,无论它们是否被选中。我添加了一个新的选择器,以获取可提交的表单元素:
$.extend($.expr[':'],{
submitable: function(a){
if($(a).is(':checkbox:not(:checked)'))
{
return false;
}
else if($(a).is(':input'))
{
return true;
}
else
{
return false;
}
}
});
用法:
$('#form_id :submitable');
虽然我还没有用多个选择框测试过它,但它可以像标准提交那样获取所有表单字段
我在OpenCart网站上自定义产品选项时使用了这个选项,包括复选框和文本字段以及标准的选择框类型。不要忘记复选框和单选按钮-
var inputs = $("#myForm :input");
var obj = $.map(inputs, function(n, i) {
var o = {};
if (n.type == "radio" || n.type == "checkbox")
o[n.id] = $(n).attr("checked");
else
o[n.id] = $(n).val();
return o;
});
return obj
我有同样的问题,并以不同的方式解决了它
var arr = new Array();
$(':input').each(function() {
arr.push($(this).val());
});
arr;
它返回所有输入字段的值。您可以将$':input更改为更具体的值。与nickf给出的解决方案相同,但考虑了数组输入名称
乙二醇
有一个类似的问题,有点扭曲,我想我会把它扔掉。我有一个获取表单的回调函数,因此我已经有了一个表单对象,无法在$'form:input'上轻松实现变量。相反,我想到了:
var dataValues = {};
form.find('input').each(
function(unusedIndex, child) {
dataValues[child.name] = child.value;
});
类似但不完全相同的情况,但我发现这个线程非常有用,我想我会把它放在最后,希望其他人会觉得它有用。jQuery的serializeArray不包含禁用的字段,因此如果您也需要这些字段,请尝试:
var data = {};
$('form.my-form').find('input, textarea, select').each(function(i, field) {
data[field.name] = field.value;
});
序列化是最好的方法。@Christopher Parker说Nickf的anwser完成的更多,但是它没有考虑表单可能包含textarea和select菜单。最好使用序列化,然后根据需要进行操作。serialize中的数据可以在Ajax post或get中使用,因此没有问题。有时我发现一次获取一个更有用。为此,有以下几点:
var input_name = "firstname";
var input = $("#form_id :input[name='"+input_name+"']");
如果需要从输入中获取多个值,并且使用[]定义具有多个值的输入,则可以使用以下方法:
$('#contentform').find('input, textarea, select').each(function(x, field) {
if (field.name) {
if (field.name.indexOf('[]')>0) {
if (!$.isArray(data[field.name])) {
data[field.name]=new Array();
}
data[field.name].push(field.value);
} else {
data[field.name]=field.value;
}
}
});
希望这对某人有帮助
// This html:
// <form id="someCoolForm">
// <input type="text" class="form-control" name="username" value="...." />
//
// <input type="text" class="form-control" name="profile.first_name" value="...." />
// <input type="text" class="form-control" name="profile.last_name" value="...." />
//
// <input type="text" class="form-control" name="emails[]" value="..." />
// <input type="text" class="form-control" name="emails[]" value=".." />
// <input type="text" class="form-control" name="emails[]" value="." />
// </form>
//
// With this js:
//
// var form1 = parseForm($('#someCoolForm'));
// console.log(form1);
//
// Will output something like:
// {
// username: "test2"
// emails:
// 0: ".@....com"
// 1: "...@........com"
// profile: Object
// first_name: "..."
// last_name: "..."
// }
//
// So, function below:
var parseForm = function (form) {
var formdata = form.serializeArray();
var data = {};
_.each(formdata, function (element) {
var value = _.values(element);
// Parsing field arrays.
if (value[0].indexOf('[]') > 0) {
var key = value[0].replace('[]', '');
if (!data[key])
data[key] = [];
data[value[0].replace('[]', '')].push(value[1]);
} else
// Parsing nested objects.
if (value[0].indexOf('.') > 0) {
var parent = value[0].substring(0, value[0].indexOf("."));
var child = value[0].substring(value[0].lastIndexOf(".") + 1);
if (!data[parent])
data[parent] = {};
data[parent][child] = value[1];
} else {
data[value[0]] = value[1];
}
});
return data;
};
这也可以在不使用jQuery的情况下使用XMLHttpRequest Level 2 FormData对象来完成
这是另一个解决方案,通过这种方式,您可以获取表单的所有数据,并在服务器端调用或其他方面使用它
$('.form').on('submit', function( e )){
var form = $( this ), // this will resolve to the form submitted
action = form.attr( 'action' ),
type = form.attr( 'method' ),
data = {};
// Make sure you use the 'name' field on the inputs you want to grab.
form.find( '[name]' ).each( function( i , v ){
var input = $( this ), // resolves to current input element.
name = input.attr( 'name' ),
value = input.val();
data[name] = value;
});
// Code which makes use of 'data'.
e.preventDefault();
}
然后,您可以将其用于ajax调用:
function sendRequest(action, type, data) {
$.ajax({
url: action,
type: type,
data: data
})
.done(function( returnedHtml ) {
$( "#responseDiv" ).append( returnedHtml );
})
.fail(function() {
$( "#responseDiv" ).append( "This failed" );
});
}
希望这对你们中的任何人都有用:所有答案都很好,但如果在该函数中有一个字段您希望忽略?简单,为字段指定一个属性,例如忽略以下内容:
<input type="text" name="some_name" ignore_this>
这就是您忽略某些字段的方式。我使用的代码没有每个循环:
$('.subscribe-form').submit(function(e){
var arr=$(this).serializeArray();
var values={};
for(i in arr){values[arr[i]['name']]=arr[i]['value']}
console.log(values);
return false;
});
奇怪的是,没有人投票支持或提出一个简洁的解决方案来获取列表数据。几乎没有任何形式是一维对象 当然,此解决方案的缺点是,必须在[0]索引处访问单例对象。但依我看,这比使用十几种测线解决方案中的一种要好得多
var formData = $('#formId').serializeArray().reduce(function (obj, item) {
if (obj[item.name] == null) {
obj[item.name] = [];
}
obj[item.name].push(item.value);
return obj;
}, {});
这段代码可以工作
输入您的表单字段名称,而不是名称
$(document).ready(function(){
$("#form_id").submit(function(event){
event.preventDefault();
var name = $("input[name='name']",this).val();
var email = $("input[name='email']",this).val();
});
});
受和答案的启发,这是我最喜欢的解决方案
$('#myForm').submit( function( event ) {
var values = $(this).serializeArray();
// In my case, I need to fetch these data before custom actions
event.preventDefault();
});
输出是一个对象数组,例如
[{name: "start-time", value: "11:01"}, {name: "end-time", value: "11:11"}]
使用下面的代码
var inputs = {};
$.each(values, function(k, v){
inputs[v.name]= v.value;
});
它的最终产出将是
{"start-time":"11:01", "end-time":"11:01"}
我希望这是有益的,以及最简单的一个
$("#form").submit(function (e) {
e.preventDefault();
input_values = $(this).serializeArray();
});
请尝试以下代码:
jQuery("#form").serializeArray().filter(obje =>
obje.value!='').map(aobj=>aobj.name+"="+aobj.value).join("&")
对于多个select元素,我修改了@Jason Norwood Young的解决方案以使其正常工作 发布的答案仅获取所选第一个元素的值,而不是所有元素的值。它也没有初始化或返回数据,前者抛出了一个JavaScript错误 以下是新版本:
function _get_values(form) {
let data = {};
$(form).find('input, textarea, select').each(function(x, field) {
if (field.name) {
if (field.name.indexOf('[]') > 0) {
if (!$.isArray(data[field.name])) {
data[field.name] = new Array();
}
for (let i = 0; i < field.selectedOptions.length; i++) {
data[field.name].push(field.selectedOptions[i].value);
}
} else {
data[field.name] = field.value;
}
}
});
return data
}
注意:您只需确保select的名称在其末尾追加[],例如:
<select name="favorite_colors[]" multiple="multiple">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
这确实是最好的答案。它甚至保留了输入字段的任何数组格式。我不认为nickf的答案实际上会保持数据结构的完整性,如果它是使用Zend_表单形成的,例如,您将字段[something]和字段[something_other]作为输入的名称。。。至少在语义上,我看不出它将如何…根据jQueryAPI文档,.se
rialize将表单的所有元素放在一个字符串中,以便在查询字符串中附加到URL,本质上模仿GET表单请求。这并不能实现nickf的答案所能实现的。值得一提的是:。serialize也只适用于表单元素。所以$'form select'。serialize将只对选择的数据进行序列化。而不是重复$'myForm',使用$this。我使用了它,但我的表单中的各种隐藏元素没有像在类型中那样隐藏,我的意思是视觉上我不希望在序列化中包含这些元素。实际上,Lance的答案保持了POST值的关联数组完好无损,需要一行代码。为什么项目是数组?您正在像使用普通对象一样使用它。在中不需要阵列here@JonathanMoralesV埃列兹2008年的奥利不再发表评论。2015年的答案与您的一致。在较新版本的jQuery中,Simon_Weaver的答案更可靠、更简单。@MightyE&@Simon_Weaver-您是对的,这是一种更可靠的方法,但它并不完全符合OP的要求。serializeArray返回具有属性名称和值的对象数组。更好的解决方案可能是将serializeArray的输出处理为所需的任何格式。我认为serializeArray完全符合您的要求,并且代码更少。对于第一个选项,元素呢?我尝试了var$inputs=$'new-ticket:input,:select';但这不起作用。有人知道正确的方法吗,因为我认为我做得不对。@Nathan,你应该使用$new-ticket:input,new-ticket:select,或者更好的,$:input,:select,new-ticket这是个好问题;事实上,我发现jQuery没有一个函数可以精确地实现这一点,这真的很奇怪。有两种不同格式的函数来获取表单数据,但不是最方便的,你知道,脚本编写…也许。如果对表单元素调用,val应该返回这样一个数组?这更多的是一个注释,而不是一个答案,因为它不回答原始问题。可能是因为他已经有很多答案了?这是对他收到的答案的补充。如果必须填写输入,我会用一个类名(如必填)来实现这一点。然后我可以检查$'.mandatory';还有!$”。强制性';将ignore_this更改为data ignore this=true,而不是创建不验证w3cAppending[0]的属性。将值更改为this,即$…[0]。值;直接给我输入值,谢谢!奇怪的是,这在最新版本的jquery 3.4.1上不起作用,请解释您的答案
var inputs = {};
$.each(values, function(k, v){
inputs[v.name]= v.value;
});
{"start-time":"11:01", "end-time":"11:01"}
$("#form").submit(function (e) {
e.preventDefault();
input_values = $(this).serializeArray();
});
jQuery("#form").serializeArray().filter(obje =>
obje.value!='').map(aobj=>aobj.name+"="+aobj.value).join("&")
function _get_values(form) {
let data = {};
$(form).find('input, textarea, select').each(function(x, field) {
if (field.name) {
if (field.name.indexOf('[]') > 0) {
if (!$.isArray(data[field.name])) {
data[field.name] = new Array();
}
for (let i = 0; i < field.selectedOptions.length; i++) {
data[field.name].push(field.selectedOptions[i].value);
}
} else {
data[field.name] = field.value;
}
}
});
return data
}
_get_values($('#form'))
<select name="favorite_colors[]" multiple="multiple">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
$("#form-id").submit(function (e) {
e.preventDefault();
inputs={};
input_serialized = $(this).serializeArray();
input_serialized.forEach(field => {
inputs[field.name] = field.value;
})
console.log(inputs)
});