如果验证成功隐藏提交按钮并显示加载图像

Question

我有一个表单可以通过 mysql php 将数据提交到数据库。我正在使用验证来检查字段是否具有值。现在我想如果提交按钮验证成功，隐藏提交按钮并显示加载图像，直到用户没有进入提交成功页面。

验证码工作正常。但问题在于隐藏提交并显示加载图像。

验证码：

    $('.msf-form form').on('submit', function(e){ 
    $(".loading").show();

    $(".sbmt").hide();
    var return_val = true;
    console.log('test');

    $(this).find('.is_mobile:visible').each(function() {                                       
        if( $(this).val() == "" ) {
            return_val = false;
            $(this).focus().css('border','1px solid #F44336');
            $(".error-messages-mobile").text("Your valid Mobile Number is required ").fadeIn();
        }
        else{
           $(this).css('border','0px solid #F44336');
           $(".error-messages-mobile").empty().fadeOut();
        }
    });

    $(this).find('.is_otp:visible').each(function() {
        if( $(this).val() == "" ) {
            return_val = false;
            $(this).focus().css('border','1px solid #F44336');
            $(".error-messages-otp").text("OTP is required ").fadeIn();
        }
        console.log(return_val);

        if(return_val == true){
            return_val = false;
            var data = {
                countryCode: $('#hiddenCode').val(),
                mobileNumber: $('#hiddenNumber').val(),
                oneTimePassword: $('#oneTimePassword').val()
              };
            $.ajax({
                url: 'test.com',
                type: 'POST',
                data: data,
                success: function (response) {console.log(response);
                  if (response == 'NUMBER VERIFIED SUCCESSFULLY') {
                        $(".error-messages-votp").empty().fadeOut();
                        $('.msf-form form').unbind('submit');
                        $('.msf-form form').submit();

                        return true;

                  }
                  else
                  {
                        return_val = false;
                        $(this).focus().css('border','1px solid #F44336');
                        $(".error-messages-otp").text("Enter valid OTP ").fadeIn();
                  }
                },
                error: function (jqXHR, textStatus, ex) { return_val = false;
                  console.log(textStatus + "," + ex + "," + jqXHR.responseText);
                }
            });
        }
    }); 

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

加载 div 的样式：

代码：

<style>
    .loading{
  display:none;
  color:#FF0000;
}
</style>

Html 和 PHP 表单代码：

我有两个输入手机号码和 OTP。我想如果其中两个有值，然后在单击时隐藏提交按钮并显示加载图像。

<input type="text" name="number" placeholder="Enter Mobile number" id="number" class="is_mobile" ><br />

<input type="hidden" name="country_code" id="country_code" class="is_vcountrycode" value="91" ><br>

<span class="error-messages-mobile" id="error"></span><br>

<div id="verifyOtpForm" >

    <input type="text" name="oneTimePassword" placeholder="Enter OTP" id="oneTimePassword" class="is_otp"><br><br>
    <span class="error-messages-otp" id="error"></span><br>
    <input type="hidden" name="hiddenCode" id="hiddenCode">
    <input type="hidden" name="hiddenNumber" id="hiddenNumber"><br>
</div>
</div>
<button type="submit" class="btn sbmt">Submit</button>
<div class="loading" style="font-size:22px;"><img src="images/loading1.gif"></div>  

Answer 1

控制台的输出是什么？ - 控制台日志（响应）；

Answer 2

你必须放

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

AJAX成功和错误函数中的代码。

此代码在 AJAX 调用响应之前执行。所以试着把它放在成功和错误块中。

Answer 3

您必须进行以下更改

1.改变

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

到

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

2。改变

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

到

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

3.删除

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

4.改变你的 Ajax else 条件

来自

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

到

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