JQuery AJAXを使用した複数フォーム処理の実装

Question

私は同じページでさまざまな操作を行う必要があるサイトで作業しています.3つのフォームを1つずつ使用しています。 .. unlockninja.comと似ています

問題は私が1つのフォームを提出すると、私は応答で他のフォームのレイアウトを取得しています...私は同じdiv内の2番目の最初のフォームを置き換えています。異なるIDと私は3つの異なるPHPファイルを使用してフォームを処理するためにJQuery AJAXを使用しています。

問題は次の2つのフォームでのみ有効ですが、3回目にクリックするとページが更新され、さらに処理が停止します。ページはリフレッシュせずに更新されません。次のフォームに行くのではなく、リフレッシュを呼び出して前のフォームに戻ります。私は3つのフォームを持っています...それぞれのフォームの提出時に...いくつかのPHPのDB操作が起こる...これらの操作の後... PHPスクリプトは、HTMLのdiv領域にロードされるHTMLレイアウトをエコーし​​ます。 。私はフォームを配置している。

db操作が実行されていますが、2つのフォームの後にはページが更新されません。

<script type="text/javascript"> 
$(function(){ 
    $("#orderForm").submit(function(e){ 
     e.preventDefault(); 

var service_id = $("#service_id").val(); 
var imei = $("#imei").val(); 
var email = $("#email").val(); 
var phone = $("#phone").val(); 
var api_key = $("#api_key").val(); 
var comments = $("#comments").val(); 
var dataString = 'service_id='+ service_id + '&imei=' + imei + '&email=' + email + '&phone=' + phone + '&api_key=' + api_key+ '&comments=' + comments; 

if(imei.length != 15 || isNaN(imei)){ 
$("#message_ajax").html('<div class="alert alert-success alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button><strong>Please enter a valid IMEI number. Type *#06# on your phone.</strong> </div>'); 
return false; 
} 
     $.ajax({ 
     type: "POST", 
     url: "order_processor.php", 
     data: dataString, 

     success: function(data) { 
     $("#service_area").html(data).show(); 
     //$('#orderForm').unbind('submit').submit()   
     } 

     });   

    }); 
}); 

</script> 


<script type="text/javascript"> 
$(function(){ 
    $("#paymentForm").submit(function(e){ 
     e.preventDefault(); 
     $("#service_area").html("Processing Payment...Please wait").show(); 
     $.ajax({ 
     url: "payment_processor.php", 

     success: function(data) { 
     $("#service_area").html(data).show(); 
     //$('#paymentForm').unbind('submit').submit()  
     } 

     });     
    }); 
}); 
</script> 

<script type="text/javascript"> 
$(function(){ 
    $("#goBackForm").submit(function(e){ 
     e.preventDefault(); 
     $("#service_area").html("All is well...getting back").show(); 
     $.ajax({ 
     url: "all_done_processor.php",   
     success: function(data) { 
     $("#service_area").html(data).show(); 
     //$('#goBackForm').unbind('submit').submit()   
     }   
     });     
    }); 
}); 

</script> 

私は問題がe.preventDefault（と関連していると思います）..私はまだ

$('#orderForm').unbind('submit').submit() 

...ない成功にいることを解決してみました。

Answer 1

$.ajax()機能内で、2つのAJAXコールでmethodとdataのプロパティが指定されていません。 methodが渡されない場合、$.ajax()のデフォルトの方法はGETです。あなたの論理を理解すれば、それはあなたがしたいことではありません。

フォーム1を送信し、成功コールバックでフォーム2を取得したいとします。フォーム2を送信し、成功コールバックでフォーム3を取得します。最後に、フォーム3を提出してください。とデータを追加することから始めましょう。