我有一个带有许多输入字段的表单。
当我用jQuery捕获提交表单事件时,是否有可能在一个关联数组中获得该表单的所有输入字段?
我有一个带有许多输入字段的表单。
当我用jQuery捕获提交表单事件时,是否有可能在一个关联数组中获得该表单的所有输入字段?
当前回答
联想?不是没有一些工作,但你可以使用通用选择器:
var items = new Array();
$('#form_id:input').each(function (el) {
items[el.name] = el;
});
其他回答
这里有另一种解决方案,通过这种方式,您可以获取关于表单的所有数据,并在服务器端调用或其他地方使用它。
$('.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" );
});
}
希望这对你们任何人都有用:)
对于多个选择元素(<select multiple="multiple">),我修改了@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
}
用法:
_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>
有时我发现一次一个更有用。为此,有这个:
var input_name = "firstname";
var input = $("#form_id :input[name='"+input_name+"']");
$('#myForm').bind('submit', function () {
var elements = this.elements;
});
elements变量将包含表单中的所有输入、选择、文本区域和字段集。
如果你需要从输入中获取多个值,并且你正在使用[]来定义具有多个值的输入,你可以使用以下方法:
$('#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;
}
}
});