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

控制台中的输出是什么？ - console.log（响应）;

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 {
  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();
}

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

3 个答案: