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;
    });
});

フォームの1つを送信すると、非表示の入力の各値がアラートに表示されます。

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()sinceを削除できます。.submit()

注：ここにキャッシュ$(this)しました。

于 2012-12-25T22:42:47.810 に答える
0

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;
});
于 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すると、submitメソッド内でフォームオブジェクトを取得できます。

動作中のjs-fiddle：http: //jsfiddle.net/xuAQv/282/

于 2012-12-25T22:49:31.790 に答える