0

小さな 1 行のフォームがたくさんあるページがあり、それぞれに 5 つの項目があります。フォームには form1、form2、form3 などの ID があり、アイテムの ID と送信ボタンは同じパターンに従います。フォームを 1 つずつ処理する次の ajax スクリプトを作成しました。ここで、変数 $n はフォームとアイテム番号に対応します。私がよくわからないのは、ページ上の各フォームに対してこのスクリプトをループする方法です。最初にページ上のフォームの数を数えてからループを作成する必要がありますか?もしそうなら、どうすればいいですか?

$(".submit$n").click(function() {

        var action = $("#form$n").attr('action');
        var form_data = {
            name: $j("#name$n").val(),
            date: $j("#date$n").val(),
            attended: $j("#attended$n").val(),
            paid: $j("#paid$n").val(),
            method: $j("#method$n").val(),
            is_ajax: 1
        };

        $j.ajax({
            type: "POST",
            url: action,
            data: form_data,
            success: function(response){

                if(response == 'success')

                    $j("#form$n").fadeOut(800);
                    console.log(response);  
            }
        });

        return false;
    });

});
4

2 に答える 2

1

申し訳ありませんが、これが正しく設定されているとは思いません。また、受け入れられた答えでもありません...非常に面倒です。元のコードがあなたが持っているすべてのフォームに複製されているかどうかはわかりませんが（$n変数全体が私を混乱させ、あなたがそれを何度か持っていると思わせるためです）、そうであれば必要ありません. これが私が使用するものです：

$(document).ready(function () {
    $(".submit").click(function () {
        var $this = $(this);
        var $form = $this.closest("form");
        var action = $form.attr('action');

        var form_data = {
            name: $form.find("[id^=name]").val(),
            date: $form.find("[id^=date]").val(),
            attended: $form.find("[id^=attended]").val(),
            paid: $form.find("[id^=paid]").val(),
            method: $form.find("[id^=method]").val(),
            is_ajax: 1
        };

        $.ajax({
            type: "POST",
            url: action,
            data: form_data,
            success: function (response) {
                if (response == 'success') {
                    $form.fadeOut(800);
                }
                console.log(response);
            }
        });

        return false;
    });
});

すべての送信ボタンに「送信」のクラスを与えるだけで、これでうまくいくはずです。念のために言っておきますが、HTML の形式は次のようになります。

<form id="form1" action="page1.php">
    <input type="text" id="name1" name="name1" /><br />
    <input type="text" id="date1" name="date1" /><br />
    <input type="text" id="attended1" name="attended1" /><br />
    <input type="text" id="paid1" name="paid1" /><br />
    <input type="text" id="method1" name="method1" /><br />
    <input type="submit" class="submit" value="Submit" />
</form>

何が起こっているのかを理解するために、Javascript は送信ボタンがクリックされたときにその親フォームを見つけます。次に、そのフォームを使用して、id"名前"、"日付" などで始まる属性を持つすべての子孫を検索します。コントロールを独自のフォームに明確に分離したため、これを行うことができます。したがって、このコードを使用すると、送信ボタンをクリックしたときに、フォームからすべてのコントロールの値を取得していることを確認できます。

于 2013-02-14T03:59:47.970 に答える
0

次のように、すべての送信ボタンに共通のクラスを追加します。<input type="submit" id="submit1" name="submit1" class="submit" />

次に、コードを次のように変更します。

$('.submit').on('click', function() {
    var n = this.id.substr(6);
    // n is the number of the form. 6 because the word submit has 6 characters.
    // You might want to do this some other way.

    // you can get the rest of the values by doing
    $('#name' + n).val()
    // and so on
});
于 2013-02-13T22:44:58.873 に答える