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

【问题标题】：How do I select the parent form based on which submit button is clicked?如何根据单击的提交按钮选择父表单？
【发布时间】：2010-09-23 14:51:01
【问题描述】：

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

那么，当用户点击form#1 的提交按钮时，如何让我的js 脚本只处理form1 中的字段？我认为它与 $(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() 这样的东西吗？还是有更好的方法来解决这个问题？

谢谢！

【问题讨论】：

标签： jquery forms

【解决方案1】：

您可以像这样选择表格：

$("#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).children().filter("input")
或 $("input,textarea,select",form)
你为什么不能像在普通的Javascript中那样使用var form = $(this).form：function onClick(button) { var form = button.form; }???
closest('form') 更好，因为它会在找到第一个匹配的父元素后停止。 parents('form:first') 遍历整个 DOM 然后应用过滤器api.jquery.com/closest/#entry-longdesc

【解决方案2】：

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

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

我不确定它是什么时候添加到 jQuery 中的，但是最接近的 () 方法确实比使用 parents() 更干净。最接近的代码可以更改为：

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

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

【讨论】：

【解决方案3】：

要获得提交在里面的表单为什么不只是

this.form

获得结果的最简单和最快的路径。

【讨论】：

为什么需要 jquery 包装器！
因为这也是一个 jQuery 问题。由于接受的答案还返回一个 jQuery 对象，我认为它会很好。抛开所有“为什么不用 jQuery 也能做到这一点”。

【解决方案4】：

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

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

$('#mybutton').closest("form") 成功了。

【讨论】：

【解决方案5】：

艾琳：不，不是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();
  ....
  });

【讨论】：