If Validation Successful Hide Submit Button And Show Loading Image

I have a form to submit data in to a database through mysql php. I am using validation to check if the fields have values or not. Now I want if validation successful on submit butt

Solution 1:

what is output in console? - console.log(response);

Solution 2:

You have to put

if(!return_val){
    $(".loading").hide();
    $(".sbmt").show(); 
    return return_val;
} 

Code in AJAX success and error function.

This code gets executed before AJAX call respond. So try putting it in success and error block.

Solution 3:

You have to make following changes

1. Change

<button type="submit" class="btn sbmt">Submit</button>

To

<button type="button" class="btn sbmt">Submit</button>

2. Change

$('.msf-form form').on('submit', function(e){ 

To

$('.msf-form form').on('click', function(e){ 

3. Remove

if(!return_val) {
      $(".loading").hide();
      $(".sbmt").show(); 
      return return_val;
    } 

4. Change your Ajax else condition

From

else {
  return_val = false;
  $(this).focus().css('border','1px solid #F44336');
  $(".error-messages-otp").text("Enter valid OTP ").fadeIn();
}

to

else {
  return_val = false;
  $(".loading").hide();
  $(".sbmt").show(); 
  $(this).focus().css('border','1px solid #F44336');
  $(".error-messages-otp").text("Enter valid OTP ").fadeIn();
}