如何根据单击的提交按钮选择父表单？

我的网页上有3种表单。没有嵌套，只是一个接一个（它们几乎是相同的，只是一个不同的隐藏变量）。一个用户只会填写一张表格，我想只用一个JS脚本来验证/等所有表格。

那么，当用户单击表单＃1的提交按钮时，如何使我的js脚本仅处理表单1中的字段？我收集到它与$（this）.parents有关，但是我不确定该如何处理。

我的验证脚本（我在其他地方使用过，只有一种形式）看起来像这样：

$(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}

所以我需要用$（this）.parents（'form'）。name.val（）替换$（“＃name”）。val（）之类的东西吗？还是有更好的方法来解决这个问题？

谢谢！

您可以选择如下形式：

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

但是，通常最好将事件附加到表单本身的提交事件上，因为即使在通过按下以下字段之一中的Enter键提交时也会触发该事件：

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

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

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

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

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

我不确定何时将其添加到jQuery中，但是最接近的（）方法确实比使用parent（）更干净地完成了所需的工作。最接近的代码可以更改为：

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

它遍历并找到与您要查找的内容匹配的第一个元素，然后在此处停止，因此无需指定：first。

要获得提交内容位于其中的表格，为什么不只是

this.form

最简单，最快的结果路径。

我使用以下方法，对我来说效果很好

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

$('#mybutton').closest("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();
  ....
  });