У меня есть форма для отправки данных в базу данных через 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>
что выводится в консоли? – console.log (ответ);
Вы должны положить
if(!return_val){ $(".loading").hide(); $(".sbmt").show(); return return_val; }
Код в функции успеха AJAX и ошибки.
Этот код запускается до ответа AJAX. Поэтому попробуйте поместить его в успех и блок ошибок.
Вы должны внести следующие изменения:
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(); }