0

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

我有一个列出一些文章的页面。借助滑块，用户可以在每个帖子上打分，然后提交。为了提交与文章关联的标记，我使用了函数 .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;
    });
});

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

4

4 回答 4

1

您需要获取input已确定元素的 s 。你可以使用.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)在这里。

于 2012-12-25T22:42:47.810 回答
0

显然，它显示了所有数据，因为您each()在 class 的所有元素上使用循环vote-form。如果您只想显示提交的表单，只需删除 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;
});
于 2012-12-25T22:42:35.473 回答
0

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

 var $inputs = $(this).find(':input');
于 2012-12-25T22:44:23.477 回答
-1

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

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

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

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

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

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

于 2012-12-25T22:49:31.790 回答