jQuery - 处理许多其他表单中的特定表单

Question

我知道很多人为此创建了主题：“在同一页面上处理多个表单”。然而，在阅读了大部分之后，我没有找到解决方案。

我有一个列出一些文章的页面。借助滑块，用户可以在每个帖子上打分，然后提交。 为了提交与文章关联的标记，我使用了函数 .each() 但我没有得到预期的结果：它是我提交的页面的最后一个表单，无论我提交什么表单。

HTML：

<form method="post" action="" class="vote-form">
    <input type="hidden" id="amount" name="amount" class="hidden" value="5" />
    <input type="hidden" id="post_id" name="post_id" value="<?php echo get_the_ID(); ?>" />
    <input type="submit" name="post_vote" value="VOTE">
</form>

JS：

$( ".vote-form" ).each(function() {

    $( this ).submit(function() {

        // get all the inputs into an array.
        var $inputs = $('.vote-form :input');

        // get an associative array of just the values.
        var values = {};
        $inputs.each(function() {
            values[this.name] = $(this).val();
            alert(values[this.name]);
        });

        // ************ Save vote in AJAX *************
        // ...

        return false;
    });
});

当我提交一个表单时，警报会显示隐藏输入的每个值。

Answer 1

您需要为确定的元素获取inputs。你可以使用.find()。

$( ".vote-form" ).each(function() {
    var $this = $(this);
    $this.submit(function() {
        // get all the inputs into an array.
        var $inputs = $this.find(':input');
        ...

您正在抓取所有现有的 input 元素，我怀疑因此在创建关联数组期间，具有相同 this.name 的元素在您处理匹配元素列表时被覆盖。

顺便说一句，您可以删除.each()，因为.submit() 对匹配的元素集起作用。

注意：我在这里缓存了$(this)。

Answer 2

显然它会显示所有数据，因为您在类vote-form 的所有元素上使用each() 循环。如果您只想显示提交的表单，只需删除 each 并使用单个提交事件触发器，例如：

$('.vote-form').submit(function() {

    // get all the inputs into an array.
    var $inputs = $(this).find(':input'); // Get all input fields of "this" specific form

    // get an associative array of just the values.
    var values = {};
    $inputs.each(function() {
        values[this.name] = $(this).val();
        alert(values[this.name]);
    });

    // ************ Save vote in AJAX *************
    // ...

    return false;
});

Answer 3

使用主要父元素中的find()，在您的情况下是表单，您将搜索隔离到您正在使用的特定实例

 var $inputs = $(this).find(':input');

Answer 4

你的问题是上下文。 通过选择您的输入

var $inputs = $('.vote-form :input');

您不会告诉 jQuery 特定的表单，因此它会选择所有具有“.vote-form”类的输入。我更喜欢在 jQuery-Selector 中传递上下文。 所以它应该是这样的：

var $inputs = $(':input', $(this));

通过使用this，您可以在提交方法中获取表单对象。

工作 js-fiddle：http://jsfiddle.net/xuAQv/282/