Implementing multiple form processing using JQuery AJAX

Question

I am working on a site where I need to do various operations in the same page..using 3 forms..one by one. ..Similar to unlockninja.com

The issue is When I submit the one form.. I am getting the other form's layout in response... I am replacing the first form by second inside the same div.All forms have different IDs and I am using JQuery AJAX to process the forms using 3 different PHP files.

Problem is : It works well only for 2 consecutive forms... but on clicking 3rd time... the page refreshes and stops processing further...i.e. The page does not update without the refresh... it is calling refresh and goes back to the previous form... rather than going to the next form. Totally I have 3 forms ... on submit of each form...some PHP db operations happen... after these operation...the php script echos the html layout that is to be loaded to the div area of HTML...inside which I am placing the form.

The db operations are happening...but the page update in not working after 2 forms.

<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>

I think the issue is related with e.preventDefault() .. I tried resolving that by

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

Still... no success.

You need to describe the problem better than "stops working". What happens? What doesn't happen? We can't troubleshoot for you unless you give more details. — random_user_name
– random_user_name, Commented Mar 24, 2016 at 21:32
Have updated the question. I have a div area with a form...on submit of which a php script is called... that processes that data and echos the response ..i.e. the new form layout. I am replacing the last form with the new one with a submit button again... this way ... it has to process 3 forms. But it's working only for any 2 consecutive forms only. — Vishal Kumar
– Vishal Kumar, Commented Mar 25, 2016 at 12:25

justinledouxweb · Accepted Answer · 2016-03-25 12:37:32Z

1

2 of your AJAX calls are not specifying the method and data properties inside the $.ajax() function. When no method is passed, $.ajax() default method is GET. If I understand your logic, that's not what you want to do.

You want to submit form 1, get form 2 in your success callback. Then submit form 2, and get form 3 in your success callback. Finally, submit form 3.

So start by adding method and your data, and it should work.

answered Mar 25, 2016 at 12:37

justinledouxweb

1,3573 gold badges13 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Implementing multiple form processing using JQuery AJAX

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related