Ajax検証成功後にのみフォームを送信

Question

「カートに追加」ボタンは、ajaxコールが成功した場合に実際の送信（カートに追加されたページに進む）を実行するようにしようとしています。メッセージはajaxの結果で与えられ、実際には実行しません。

は、これは私が私がevent.preventDefaultを削除する場合は、これまで

$("#addtocart").submit(function(event){ 
    var data = $(this).serialize(); 

    $.ajax({ 
     type: "POST", 
     url: "/cart/check", 
     dataType:"json", 
     data: data 
    }).done(function(data){ 
     $("#message").html(data.message);    
     if (data.success == true) this.submit();   
    }) 
    event.preventDefault();   
}); 

（）私はそれを残す場合は、フォームは常に、関係なく、小切手の提出、それが提出することはありません持っているものです。たぶんthis.submit（）は正しい解決策ではないでしょう。私は、検証には成功はありませんでした場合でpreventDefaultだけ呼ばれるべきであることをどこかで読んますが、私は

if (data.success == false) event.preventDefault(); 

をしようとした場合data.successは、i「は

真か偽であるかどうかはまだ関係なく、フォームを送信しませんあなたがこの権利を行う方法の解決策を持っている人なら、これまでどんなに感謝しているでしょうか？

Answer 1

this doneコールバックはjqXhrオブジェクトです。フォームではありません。フォームをdone関数のコンテキストとしてバインドするには、コンテキスト設定。

$.ajax({ 
    context: this, //<-- the form 
    ... 

Answer 2

thisこれは通常、そのコールバックのためのjQueryのコードではなく、あなたの、ある呼び出し元のコンテキストに設定されているため、コールバック内のフォームではありません。あなたのためにおそらくthis - あなたはそれになりたいものは何でも

がにあなたのコールバックでthisを設定する$.ajaxのcontextプロパティを使用します：

$.ajax({ 
    ... 
    context: this 
}) 

使用$("#addtocart")あなたはそれを修正することができ、いくつかの異なる方法があります。 thisの代わりに。しかし、使用するセレクタについて気を付け直したり、複数の異なるフォームに同じコードを使用したい場合は、拡張性が低くなります。

イベントのターゲット上でコードを実行するには、何らかの要素が発生した場合は、event.target（または$(event.target)）を使用します。つまり、まだ使用したい場合は、thisによってjQuery XHRオブジェクトにアクセスできますが、それはまったく問題ではありません。