HTML: JavaScript:阻止表单提交并调用Javascript函数
HTML: JavaScript:阻止表单提交并调用Javascript函数
提问于 2013-01-23 12:40:32
当表单中的提交按钮被按下时，我想进行AJAX调用。InFact我不能删除<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函数。
谢谢
回答 6
Stack Overflow用户
回答已采纳
发布于 2013-01-23 13:16:47
将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;
}Stack Overflow用户
发布于 2013-01-23 12:43:06
正确的jQuery方式应该是：
$("form").on('submit', function (e) {
//ajax call here
//stop form submission
e.preventDefault();
});正如您所说的，您还可以删除<form>元素，只需将ajax调用绑定到按钮的click事件。
Stack Overflow用户
发布于 2013-01-23 13:12:20
使用 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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14472583
复制相关文章
相似问题
腾讯云开发者
