JQuery обновить формы выпуска - PullRequest
Новая
       20

JQuery обновить формы выпуска

0 голосов
/ 17 мая 2019

Я использую форму HTML и небольшой фрагмент jquery через onclick для отображения загрузчика. Однако счетчик показывает только на секунду, а затем мгновенно закрывается. Я предполагаю, что это из-за поста на обратной стороне страницы в процессе отправки.

У меня был тук с онкликом и подачей, но безрезультатно. 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
function LoadIcon() {

$("#form1").click(function(){
 $('#loading').html("Loading please wait"); 
});
}
</script>
<form id="form1" name="form1" action="">   
<input name="button" onclick="LoadIcon()" id="button" type="submit"  value="Search Now">
</form>

<div id='loading'></div>
</body>
</html>

Я хотел бы, чтобы страница отправлялась, а загрузочный счетчик оставался отображенным в соответствии с этим фрагментом кода.

1 Ответ

0 голосов
/ 17 мая 2019

[1] Не использовать событие внутри функции с помощью onclick .. Вы можете выбрать между -> Действие в функции и onclick ИЛИ -> Используйте событие, как в примере ниже

[2] Обернуть событие в $(function(){....}), чтобы запустить код, когда документ готов

[3] С использованием форм submit не click

[4] Используйте e.preventDefault() для предотвращения перенаправления по умолчанию формы 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
//function LoadIcon() {
$(function(){
  $("#form1").on('submit',function(e){
    e.preventDefault();
   $('#loading').html("Loading please wait"); 
  });
});
//}
</script>
<form id="form1" name="form1" action="">   
<input name="button" id="button" type="submit"  value="Search Now">
</form>

<div id='loading'></div>
</body>
</html>

[Наконец] Если у вас есть данные в форме, вам может понадобиться ajax

...