Question

HTML：

<form method="post" action="action=save&amp;id=239" id="save-form">
    <input type="text" value="0" name="views" /> <input type="submit" value="save plz" name="save" />
</form>
<form method="post" action="action=save&amp;id=862" id="save-form">
    <input type="text" value="3" name="views" /> <input type="submit" value="save plz" name="save" />
</form>
<form method="post" action="action=save&amp;id=12" id="save-form">
    <input type="text" value="2" name="views" /> <input type="submit" value="save plz" name="save" />
</form>

PHP：

if ($_GET["action"] == "save") {
    if (isset($_GET["id"]) && preg_match("/^\d+$/", $_GET["id"])) {
        $id = $_GET["id"];
        // update view count here
    }
}

jQuery的：

$('#save-form').ajaxForm({
    beforeSubmit: function() {      
        //
    },
    success: function(data) {
        //
    }
});

我正在使用此插件：http://jquery.malsup.com/form/#html

我现在意识到我的所有表单共享相同的ID save-form。此代码适用于save-form的第一个实例。但我希望它适用于所有人。这让我想到了我的主要问题：

如何修改当前的jQuery / HTML以处理每个单独的表单。

理想情况下，我有一个唯一ID，例如save-form-239和save-form-862。但是我不想为每种形式写$('#save-form-239')和$('#save-form-262'); ..我该怎么办？

Answer 1

即使我确定dbaseman的解决方案工作正常，通常最好避免使用具有相同ID的多个元素，因为根据HTML规范它是无效的。

更清洁的解决方案是使用class="save-form"代替id="save-form"，然后执行$('.save-form').ajaxForm(...);

Answer 2

您可以像这样编写选择器以获得单独的表单：

$('[id=save-form]').eq(0);

（使用显式属性选择器而不是“＃”快捷方式允许JQuery使用匹配的ID提取所有元素）

我想你会想要这样的东西来处理每个表格：

$('[id=save-form]').each(function() {
    $(this).ajaxForm({
        beforeSubmit: function() {      
            //
        },
        success: function(data) {
            //
        }
    });
});

在一个页面上处理多个表单

2 个答案: