Question

现在我知道这听起来很简单，但老实说我不能拨打这个。我在一个页面上有两个表格。我写了一些形式验证函数，这些函数被触发：

$("form").submit(function(event) {
    event.preventDefault();
    checkRequired();
    checkLengths();
    checkFormats();
    checkErrors();
});

这很棒，但在函数内部，我无法使用$(this)来识别单击提交按钮的<form>。

假设我在 checkRequired（）函数中写了alert($(this).attr('id'));。它会提醒“对象，对象”。

如果我将相同的代码放在$("form").submit()函数中，它将返回我的表单的id。

函数内部的选择器类似$("input[type='text']")之类的东西，但是函数在所有输入上运行，而不仅仅是在提交的表单中。

使用的示例函数（）：

function checkFormats() {

    alert("Checking Formats...");

    $(".email").each(function(){

        alert("Checking Formats: Email...");

        var emailField = $(this).children("input[type='text']");
        var strEmail = emailField.val();

        if( strEmail.indexOf( "@" ) == -1 ) {
            alert("What the hell?");
        }

    });

}

我确信当我听到解决方案时我会感到愚蠢，但是，嘿，我太累了哈哈...提前谢谢！

思考可能$("form",this)可能会让我到达某个地方？

Answer 1

你能否将表格传递给方法？

$("form").submit(function(event) {
    event.preventDefault();
    checkRequired(this);
    checkLengths(this);
    checkFormats(this);
    checkErrors(this);
});

然后你有正确的背景。您现在可以在指定表单的上下文中选择任何其他元素，类似于::

function checkFormats(theForm) {
    $form = $(theForm);

    alert("Checking Formats...");

    // Get emails from within the context of the current form.
    $(".email", $form).each(function(){

        alert("Checking Formats: Email...");

        var emailField = $(this).children("input[type='text']");
        var strEmail = emailField.val();

        if( strEmail.indexOf( "@" ) == -1 ) {
            alert("What the hell?");
        }

    });
}

替代方案 - 使用JavaScript .apply

（如评论中Mike Robinson所述）

$("form").submit(function(event) {
    event.preventDefault();
    checkRequired.apply(this);
    checkLengths.apply(this);
    checkFormats.apply(this);
    checkErrors.apply(this);
});

然后函数中的this成为表单。您现在可以像这样使用它：

function checkFormats(theForm) {
    $form = $(this);

    alert("Checking Formats...");

    // Get emails from within the context of the current form.
    $(".email", $form).each(function(){

        alert("Checking Formats: Email...");

        var emailField = $(this).children("input[type='text']");
        var strEmail = emailField.val();

        if( strEmail.indexOf( "@" ) == -1 ) {
            alert("What the hell?");
        }

    });
}

DEMO - 使用.apply

Demo使用简单的HTML From：

<form>
    <button type="submit">submit</button>
</form>

使用此脚本：

$("form").submit(function (event) {
    event.preventDefault();
    checkRequired.apply(this);
});

function checkRequired() {
    alert("This is of type: " + this.nodeName);
}

Answer 2

在jquery调用中为表单提供一个ID和引用：

$("#form1").submit(function(event) {
event.preventDefault();
checkRequired();
checkLengths();
checkFormats();
checkErrors();
});

Answer 3

您需要的是每个表单元素的唯一名称。阅读有关jquery选择器的信息，您可以在其中选择需要选择的表单

使用Id

$（ '＃form_id'）

班级

$（”。Form1' 中）

甚至是数组中的索引。

$（'form：first'）[0] $（'form：last'）

在页面上有两个<form>，如何让jQuery只在一个上运行函数（不使用ID）？</form>

3 个答案:

替代方案 - 使用JavaScript .apply