Jquery 刷新问题表单

Question

我使用 HTML 表单和一小段 jquery 通过 onclick 来显示加载微调器。然而，微调器只显示一秒钟然后立即关闭。我认为这是因为在提交过程中页面的 post 背面。

我试过 onclick 和 onsubmit 但无济于事。

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

我希望提交的页面和加载微调器按照此代码段保持显示。

Answer 1

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

Jquery 刷新问题表单

Jquery refresh issue forms

html

forms

jquery

refresh

submit