jquery how to wait for ajax call before next-CodePudding

I have a form on my website where in some cases I need to validate a phone number and in other cases I don't have to (based on changes in the input field.

The form is populated with data from an database and if the input "phone_Number" has been changed I need to validate the number when submit is pressed.

If the input "phone_number" hasn't changed the form has other inputs that needs to be validated.

My issue is: If the phone number has changed I need to make 2 calls with ajax instead of 1, and I can't figure out what the best way to do that is. I have read that async: false was deprecated, so I need help how to arrange my code in order for the submit to work.

I have looked at some different jquery when/wait examples, but I do not understand jquery good enough to change the examples results into my question.

$(document).on('submit', '#order_form', function(event){
   let form_data = new FormData($('#order_form')[0]);
   let phone_number = $('#phone_number').val();
   form_data.append('customer_name',$('#customer_name').val());
   if($('#old_number').val() != phone_number) {
      $.ajax({
         url: 'https://api.numlookupapi.com/v1/validate/'   phone_number   '?apikey=api_key',
         dataType: 'json',
         success: function(json) {
            form_data.append('valid',json.valid);
            form_data.append('number',json.number);
            form_data.append('local_format',json.local_format);
            .... some additional "form_data.append" happens here ....
         }
      });
   } else {
      form_data.append('local_format',phone_number);
   }
   $.ajax({
      url: "process.php",
      method: 'POST',
      data: form_data,
      contentType: false,
      processData: false,
      success: function () {
         .... do something ....
      }
   });
});`

CodePudding user response：

You can put the second AJAX call in the success method of the previous AJAX function. Like this:

function processFormData(form_data)
{
   $.ajax({
      url: "process.php",
      method: 'POST',
      data: form_data,
      contentType: false,
      processData: false,
      success: function () {
         .... do something ....
      }
   });
}

$(document).on('submit', '#order_form', function(event){
   let form_data = new FormData($('#order_form')[0]);
   let phone_number = $('#phone_number').val();
   form_data.append('customer_name',$('#customer_name').val());
   if($('#old_number').val() != phone_number) {
      $.ajax({
         url: 'https://api.numlookupapi.com/v1/validate/'   phone_number   '?apikey=api_key',
         dataType: 'json',
         success: function(json) {
            form_data.append('valid',json.valid);
            form_data.append('number',json.number);
            form_data.append('local_format',json.local_format);
            .... some additional "form_data.append" happens here ....
            processFormData(form_data);
         }
      });
   } else {
      form_data.append('local_format',phone_number);
      processFormData(form_data);
   }
});

When the phone number has changed processFormData() will only be called when the API call has been successful, otherwise processFormData() will be called directly.

Note: Why not simply use one AJAX call and check in PHP whether the phone number has changed? You can call the API from PHP to check if the number is valid. In general you should always do your final input validation server-side, because anything client-side can be manipulated.