如果验证成功，则隐藏“提交"按钮并显示正在加载图像 [英] if validation successful hide submit button and show loading image

问题描述

我有一种通过mysql php将数据提交到数据库的表单.我正在使用验证来检查字段是否具有值.现在，我想确认是否成功完成了提交按钮，然后隐藏提交按钮并显示加载图像，直到用户不进入提交成功页面为止.

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 button, hide the submit button and show loading image till the time user do not go to submission successful page.

验证代码运行正常.但是问题在于隐藏提交并显示加载图像.

Validation code is working fine. But problem is in hiding submit and showing loading image.

验证码:

    $('.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表单代码:

Html and PHP Form Code:

我有两个输入手机号码和OTP.我想要其中两个是否具有值，然后在单击时隐藏提交"按钮并显示正在加载的图像.

I have two inputs mobile number and OTP. I want if two of them have values then hide submit button on click and show loading image.

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

推荐答案

控制台中输出了什么? -console.log(response);

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

这篇关于如果验证成功，则隐藏“提交"按钮并显示正在加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！