使用JQuery實現多個表單處理AJAX

我正在一個網站上工作，我需要在同一個頁面中進行各種操作......使用3種形式......一個接一個。 ..類似unlockninja.com使用JQuery實現多個表單處理AJAX

問題是當我提交一個表單..我得到另一個表單的佈局作爲響應...我在第二個內部替換第一個表單在同一個div.All形式有不同的ID，我使用JQuery AJAX來處理使用3個不同的PHP文件的表單。

問題是：它只適用於2個連續的窗體......但在第3次點擊時...頁面刷新並停止進一步處理......即，頁面沒有刷新沒有更新...它調用刷新並返回到前一個表單...而不是轉到下一個表單。完全我有3種形式...每個表格的提交......一些PHP數據庫操作發生......在這些操作之後...... PHP腳本回顯將被加載到HTML div區域的html佈局.. 。我正在放置這個表格。

數據庫操作正在發生......但頁面更新無法在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()

還是......沒有成功。

來源

2016-03-24 Vishal Kumar

您需要比「停止工作」更好地描述問題。怎麼了？什麼不發生？除非您提供更多詳細信息，否則我們無法爲您排除故障。 –

你能不能請添加html以及 – Sabbin

已經更新了這個問題。我有一個窗體的div區域...提交的PHP腳本被稱爲...處理該數據和迴應的響應..i.e。新的表格佈局。我用一個提交按鈕再次替換最後一個表單...這樣...它必須處理3個表單。但它僅適用於任何2個連續的表單。 –

2個AJAX調用未指定$.ajax()函數中的method和data屬性。當沒有method通過時，$.ajax()默認方法是GET。如果我理解你的邏輯，那不是你想要做的。

您想要提交表單1，在成功回調中獲取表單2。然後提交表單2，並在成功回調中獲取表單3。最後，提交表單3.

因此，首先加入method和您的數據，它應該工作。

來源

2016-03-25 12:37:32 justinledouxweb

使用JQuery實現多個表單處理AJAX

回答

相關問題