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

您需要获取已确定元素的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的元素被覆盖。 / p>

顺便说一句，您可以放弃.each()，因为.submit()适用于匹配元素集。

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

Answer 2

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

$('.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，您可以在submit方法中获取表单对象。

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

jQuery - 在众多其他人中处理特定的表单

4 个答案: