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

时间:2014-06-25 14:22:59

标签: javascript jquery

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

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

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而不是表单字段的值。

1 个答案:

答案 0 :(得分:-1)

执行此操作的一种方法是首先停止浏览器提交。像这样:

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

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

var dataAndTime2dateTime = function(e){ e.preventDefault(); // do stuff // then send manually }

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

$.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name] !== undefined) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; };

您可以像这样使用此功能:

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

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

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