我如何选择父表单的基础上，提交按钮被点击？

我有一个网页，上面有三个表格。没有嵌套，只是一个接着一个(它们几乎相同，只是一个隐藏的变量不同)。用户只需填写一个表单，我想用一个 JS 脚本验证/etc 所有表单。

那么，当用户单击表单 # 1的提交按钮时，我如何让 js 脚本只处理表单1中的字段呢？我猜这和 $(这个)有关。父母，但我不知道该怎么办。

我的验证脚本(我在其他地方使用过，只有一个表单)看起来是这样的:


$(document).ready(function(){
$("#submit").click(function(){
$(".error").hide();
var hasError = false;


var nameVal = $("#name").val();
if(nameVal == '') {
$("#name").after('Please enter your name.');
hasError = true;
}




if(hasError == false) {blah blah do all the processing stuff}

所以我需要替换诸如 $(“ # name”)之类的东西。Val ()和 $(this)。家长(表格)。名字 val () ？还是有更好的办法？

谢谢！

189021 次浏览
小开
最佳答案

你可以这样选择表单:

$("#submit").click(function(){
var form = $(this).parents('form:first');
...
});

不过，一般来说，最好将该事件附加于表格本身的提交事件，因为即使在提交时按下其中一个字段的回车键，该事件也会触发:

$('form#myform1').submit(function(e){
e.preventDefault(); //Prevent the normal submission action
var form = this;
// ... Handle form submission
});

若要选择表单内的字段，请使用表单上下文。例如:

$("input[name='somename']",form).val();
小开

为了得到提交的表单，为什么不只是

this.form

获得结果的最简单、最快捷的途径。

小开

艾琳: 不，不是 var nameVal = form.inputname.val();。它应该是... ..。

返回文章页面 jQuery:

// you can use IDs (easier)


var nameVal =  $(form).find('#id').val();


// or use the [name=Fieldname] to search for the field


var nameVal =  $(form).find('[name=Fieldname]').val();

或者在 JavaScript 中:

var nameVal = this.form.FieldName.value;

或者一个组合:

var nameVal = $(this.form.FieldName).val();

使用 jQuery，您甚至可以遍历表单中的所有输入:

$(form).find('input, select, textarea').each(function(){


var name = this.name;
// OR
var name = $(this).attr('name');


var value = this.value;
// OR
var value = $(this).val();
....
});
小开

我在搜索如何找到输入元素的形式时找到了这个答案。我想添加一个注释，因为现在有一个比使用更好的方法:

var form = $(this).parents('form:first');

我不确定它是什么时候被添加到 jQuery 中的，但是最近的()方法比使用父()方法能够更清楚地完成需要完成的工作。最接近的代码可以更改为:

var form = $(this).closest('form');

它向上遍历并找到第一个匹配您正在查找的元素，并在那里停止，因此不需要指定: first。

小开

我用了下面的方法，效果很好

$('#mybutton').click(function(){
clearForm($('#mybutton').closest("form"));
});

$('#mybutton').closest("form")帮了我大忙。


提交答案