javascript - 如何在 jQuery 提交处理程序中操作表单元素？

Question

我想在一些表单元素发送到浏览器之前对其进行操作(添加、删除)。

我可以捕获提交事件并获取表单对象，但我没有找到从 dataAndTime2dateTime 函数中的 form 对象访问输入元素的方法。

var dataAndTime2dateTime = function(form) {
    console.log(form);
    // add element called 'dateTime'
    // remove element called 'date'
};

$( "#searchFirst" ).submit(dataAndTime2dateTime);

如何从 form 对象获取表单输入元素并对其进行操作？

更新:

根据我从评论中了解到的信息，我将代码更新为

var dataAndTime2dateTime = function(event) {
    console.log($(this).filter("input[name='searchDateTo']").val());
};

但这会返回 undefined 而不是表单字段的值。

Answer 1

实现此目的的一种方法是首先阻止浏览器提交。像这样:

$('#searchFirst').submit(dataAndTime2dateTime(e));

变量 e“捕获”提交事件并将其传递给您的函数。然后，您可以使用 event.preventDefault() 函数阻止浏览器执行其通常的操作。

var dataAndTime2dateTime = 函数(e){
e.preventDefault();
//做东西
//然后手动发送
}

用于检索表单元素的现成方法是

$.fn.serializeObject = 函数() {
var o = {};
var a = this.serializeArray();
$.each(a, 函数() {
if (o[this.name] !== 未定义) {
if (!o[this.name].push) {
o[这个名称] = [o[这个名称]];
}
o[this.name].push(this.value || '');
} 别的 {
o[this.name] = this.value || '';
}
});
返回o；
};

您可以像这样使用这个函数:

var formSerializedObject = $('#searchFirst').serializeObject();

确保每个表单元素都有唯一的名称。

然后您可以轻松地操作该字符串并将其发送到您的 api。