JQuery — Как показать Loading.gif при нажатии кнопки «Отправить»
У меня есть форма, которая позволяет нам вводить данные и загружать файлы. Когда я нажимаю кнопку отправки, я хочу показать файл loading.gif, который позволяет людям узнать, что форма обрабатывается. Ниже приведен DIV, который я спрятал
<div class="formprocessgif" style="display:none;"><img src="https://web-answers.ru/wp-content/uploads/2019/03/spiffygif_50x50.gif" align="center"> We are processing your submssion. Please wait...</div>
Проблема в том, что я не уверен, где показать этот скрипт, когда мы нажимаем «Отправить». Я использую плагин проверки для формы, и поэтому я не очень уверен, должен ли я поместить его под submitHandler в сценарии проверки или в отдельном событии для кнопки «Отправить».
Под плагином проверки:
submitHandler: function(form) {
$(".formprocess.gif").show();
$(form).submit();
}
Под событие само по себе
$("#papersubmitform").submit(function(event) {
$(".formprocess.gif").show();
$(form).submit();
});
Оба не работают, к сожалению .. есть что-то, что я здесь скучаю?
Решение
Ваше имя класса неверно удалить . до gif лайк,
$(".formprocessgif").show();
Ваш код должен быть,
$("#papersubmitform").submit(function(event) {
$(".formprocessgif").show();
// ------------^ remove dot from here
$(form).submit();
});
Другие решения
<div id="formprocessgif"><img src="formprocess.gif"></div>
Аякс —>
$("#papersubmitform").submit(function(event) {
$("#formprocessgif").show(slow); //$.ajax({
url: 'mail.php', // your post url
type: 'post',
data: $('#papersubmitform').serialize(),
success: function(response)
{
// your Action After submit
}
});
});
HTML
<div class="formprocessgif"><img src="https://web-answers.ru/wp-content/uploads/2019/03/spiffygif_50x50.gif" align="center"> We are processing your submssion. Please wait...</div>
CSS
.formprocessgif {
display: none;
}
JQuery
$(form).submit(function() {
$.ajax({
type: "POST",
url: "action.php", //Your URL
data: $(form).serialize(), //post form data to your url
success: function() {
//your action after submit success
}
});
//ajax request start. here we change the display on your class from "none" to "block"$(document).ajaxStart(function(){
$(".formprocessgif").css("display","block");
});
//when ajax complete, we change back display to "none" to hidden loading image
$(document).ajaxComplete(function(){
$(".formprocessgif").css("display","none");
});
});