HTML: JavaScript: 阻止表单提交和调用 Javascript 函数
Posted
技术标签:
【中文标题】HTML: JavaScript: 阻止表单提交和调用 Javascript 函数【英文标题】：HTML: JavaScript: Block Form submission and call Javascript function 【发布时间】：2013-01-06 12:16:21 【问题描述】：我想在按下表单中的提交按钮时进行 AJAX 调用。
事实上，我无法删除<form>，因为我也想进行客户端验证。
我试过这段代码。
<form name="search" >
Name: <input type="text" name="name1"/>
Age: <input type="text" name="age1"/>
<input type="submit" name="Submit" value="Submit" onclick="makeSearch()"/>
</form>
JS
function makeSearch()
alert("Code to make AJAX Call");
使用此代码后，alert() 未显示，但页面已重新加载。 我想阻止页面重新加载并调用JS函数。
谢谢
【问题讨论】：
将输入更改为 type="button" :: 请在询问How To之前查看 @EddieB 一些浏览器仍然会使用input type=button提交
如果你使用的是纯javascript，那么在函数结束时返回false；这将阻止表单提交
@ExplosionPills True :: 将输入更改为按钮 type="button" 会起作用 :: Here's a 'How To'
@EddieB 我什至不认为这是真的；很确定 IE7 仍然会提交带有按钮类型按钮的表单
【参考方案1】：
将onsubmit 属性添加到form 标签：
<form name="search" onsubmit="return makeSearch()" >
Name: <input type="text" name="name1"/>
Age: <input type="text" name="age1"/>
<input type="submit" name="Submit" value="Submit"/>
</form>
并且javascript在末尾添加return false：
function makeSearch()
alert("Code to make AJAX Call");
return false;
【讨论】：
不仅onclick不好，还有：fuelyourcoding.com/jquery-events-stop-misusing-return-false
@ExplosionPills...为什么onclick不好？
如果你想使用'onclick'输入类型应该是“按钮”而不是“提交”
如果我在返回 false 之前添加一个函数，它仍然会提交表单。例如：函数 mySubmitFunction() checkElements();返回假；
没关系，是代码上的错误，并没有在控制台上显示错误。【参考方案2】：
正确的 jQuery 方式是：
$("form").on('submit', function (e)
//ajax call here
//stop form submission
e.preventDefault();
);
如您所说，您还可以删除 <form> 元素并将 ajax 调用绑定到按钮的 click 事件。
【讨论】：
很好的答案。 IMO 最好将所有 JS 与 html 标记分开。这是一支带有工作示例的笔：codepen.io/martinkrulltott/pen/yNZJbp【参考方案3】：使用 jQuery.post，并更改提交按钮。
提交按钮是为通过POST (native method, not ajax)向服务器发送数据而创建的，我建议仅在特殊情况下使用它，例如上传文件时。
如果您继续使用提交按钮进行 ajax 请求，您将会遇到很多 IE 问题。
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script language="javascript">
function makeSearch()
if(validateIdata())
alert("send ajax request");
return;
$.ajax(
type: 'POST',
url: url, //- action form
data: name1:$('#name1').val(),age1:$('#age1').val(),
success: function()
alert('success');
);
function validateIdata()
if($('#name1').val() =='')
alert("Invalid Name");
return false;
if($('#age1').val() =='')
alert("Invalid Age");
return false;
return true;
</script>
</head>
<body>
<form name="search" >
Name: <input type="text" id="name1" name="name1"/>
Age: <input type="text" id="age1" name="age1"/>
<input type="button" name="Submit" value="Submit" onclick="makeSearch()"/>
</form>
</body>
</html>
【讨论】：
【参考方案4】：<form name="search" >
Name: <input type="text" name="name1"/>
Age: <input type="text" name="age1"/>
<input type="submit" name="Submit" value="Submit" onclick="return makeSearch();"/>
</form>
function makeSearch()
alert("Code to make AJAX Call");
只需在 onclick 函数中使用 return 它对你有好处
【讨论】：
【参考方案5】：document.getElementById("bt1").type='submit';
document.getElementById("bt1").onclick="";
var elem = document.getElementById("bt1");
if (typeof elem.onclick == "function")
elem.onclick.apply(elem);
<form id="org" action="">
<fieldset class="log">
<legend>Log in</legend>
<label for="uname">Username</label>
<input type="text" name="uname" id="uname" value="" required/><br />
<label for="pword">Password</label>
<input type="password" name="pword" id="pword" value="" required/><br />
<input type="button" onclick="organizer()" value="LOG IN" class="red-btn" id="bt1"/>
</fieldset>
</form>
【讨论】：
【参考方案6】：终于找到答案了
$("form").live("submit", function()
makeSearch();
return false;
);
【讨论】：
这不是渐进式的 :: 如果 js 被禁用它将提交。请参阅我在第一条评论中提供的链接。 如果我删除了提交按钮，客户端验证将不会执行。所以我不应该删除它。而且我在我的项目中使用了上面的代码，效果很好...... 您不需要有提交按钮进行验证...您可以滚动自己的验证参考：Custom Validation.live 不好，还有：fuelyourcoding.com/jquery-events-stop-misusing-return-false以上是关于HTML: JavaScript: 阻止表单提交和调用 Javascript 函数的主要内容，如果未能解决你的问题，请参考以下文章