Question

我有一个包含3个表单的网页。没有嵌套，只是一个接一个（它们几乎完全相同，只有一个不同的隐藏变量）。用户只填写一个表单，我想用只有一个JS脚本验证/ etc所有表单。

那么当用户点击表单＃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}

所以我需要更换$（“＃name”）。val（）和$（this）.parents（'form'）。name.val（）？或者有更好的方法来解决这个问题吗？

谢谢！

Answer 1

您可以选择以下形式：

$("#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();

Answer 2

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

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

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

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

它遍历并找到第一个符合您要查找的元素并停在那里，因此无需指定：首先。

Answer 3

要获取提交内容的形式，不仅仅是

this.form

最简单＆amp;最快的结果路径。

Answer 4

我使用以下方法＆amp;它对我来说很好用

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

$('#mybutton').closest("form")为我做了诀窍。

Answer 5

Eileen：不，它不是“var nameVal = form.inputname.val（）;”它应该是......

在Jquery中

：

//你可以使用id（更简单）

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

//或使用[name = Fieldname]搜索字段

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();
  ....
  });

jquery / js - 如何根据单击的提交按钮选择父窗体？

5 个答案: