2

私は次のフォームを持っています：

    <form id="squatsForm"> 
        {% csrf_token %}
        <input type="text" name="amount" id="squatsVal" value="Squats" />
        <input type="hidden" name="exercise" value="squats" />
        <input type="submit" id="submitSquats" value="Add Squats"/><br />
    </form>

フォームを検証してから、さらに処理するためにAjaxを介してそのフォームのデータを送信したいと思います。submitHandlerフォームがPOSTリクエストで新しいページをロードするデフォルトのアクションを実行せず、代わりにAjax関数を起動するように使用しようとしています。

$(document).ready(function() {
    $('#squatsForm').validate({
        rules: {
            amount: {
                required: true,
                number: true    
               }   
            },  
        submitHandler: function(form) {
            $.post(
                "submitWorkout1",
                form.serialize(),
                function(data) {
                    var jsonData = $.parseJSON(data);
                    $("#squats").html(jsonData['amount']);
                }); 
            }   
        });

ただし、フォームでデータを入力しようとすると、ページが再読み込みされ、Ajaxリクエストが実行されません。

検証を実装する前は、Ajaxリクエストは正常に機能していました。

4

2 に答える 2

4

フォームを検証しますか？

私はあなたの質問にコメントを投稿するのに十分な評判がありません。そうでなければ、準備完了機能を終了するのを忘れたのか、コピー＆ペースト中にそれを見逃したのかを尋ねただけです。

私はあなたのコードを使用し、それが実行されないことを確認しました。[スクワットの追加]ボタンをクリックすると、金額フィールドに適切な値があるかどうかに関係なく、ページがリロードされました。

ただし、});コードの最後にを追加して適切に終了する$(document).ready(function () {と、機能しました。

検証を実行し、の最初のステートメントとして配置したアラートも発生しsubmitHandlerます。

    $(document).ready(function () {
        $('#squatsForm').validate({
            rules: {
                amount: {
                    required: true,
                    number: true
                }
            },
            submitHandler: function (form) {
                $.post(
                            "submitWorkout1",
                           form.serialize(),
                           function (data) {
                               var jsonData = $.parseJSON(data);
                               $("#squats").html(jsonData['amount']);
                           }
                      );
            }
        });
    });

あなたの問題の解決策が、ready関数を適切に終了するのと同じくらい簡単であることを願っています。そうでない場合は、これをさらに一緒にデバッグしましょう！お知らせ下さい。

于 2013-03-24T20:41:22.023 に答える
0

submitHandler関数の「form」変数をjquery関数でラップすると修正されます

$(document).ready(function() {
    $('#squatsForm').validate({
        rules: {
            amount: {
                required: true,
                number: true    
               }   
            },  
        submitHandler: function(form) {
            $.post(
                "submitWorkout1",
                $(form).serialize(),
                function(data) {
                    var jsonData = $.parseJSON(data);
                    $("#squats").html(jsonData['amount']);
                }); 
            }   
        });

この回答をご覧ください： https ：//stackoverflow.com/a/10861735/1497042

于 2013-07-05T16:51:50.780 に答える