Jquery 刷新问题表单
Posted
技术标签:
【中文标题】Jquery 刷新问题表单【英文标题】：Jquery refresh issue forms 【发布时间】：2019-10-05 02:54:37 【问题描述】：我通过 onclick 使用 html 表单和 jquery 的小 sn-p 来显示加载微调器。然而，微调器只显示一秒钟然后立即关闭。我认为这是因为在提交过程中页面的回发。
我已经用 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>
我希望页面提交和加载微调器按照此代码 sn-p 保持显示。
【问题讨论】：
【参考方案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/ajax 正确刷新包含表单的 div？