HTML: JavaScript: 阻止表单提交和调用 Javascript 函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14472583/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML: JavaScript: Block Form submission and call Javascript function
提问by Sridhar
I want to make AJAX call when a submit button in the form pressed.
InFact I cant remove the <form>because I want to made clientside validation also.
I tried this code.
我想在按下表单中的提交按钮时进行 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
JS
function makeSearch(){
alert("Code to make AJAX Call");
}
After using this code alert() not showing but the page is reloaded. I want to block the page reload and call the JS function.
使用此代码后，alert() 未显示，但页面已重新加载。我想阻止页面重新加载并调用JS函数。
Thanks
谢谢
回答by Miqdad Ali
Add the onsubmitattribute to the formtag:
将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>
And javascript add return falseat the end:
并return false在最后添加 javascript ：
function makeSearch() {
alert("Code to make AJAX Call");
return false;
}
回答by Explosion Pills
The correct, jQuery way would be:
正确的 jQuery 方式是：
$("form").on('submit', function (e) {
//ajax call here
//stop form submission
e.preventDefault();
});
Like you said, you could also remove the <form>element and just bind the ajax call to the button's clickevent.
就像你说的，你也可以删除<form>元素并将ajax调用绑定到按钮的click事件。
回答by Gregorio Marciano
use jQuery.post, and change submit button.
使用jQuery.post，并更改提交按钮。
Submit button is create for send data to server via POST (native method, not ajax), I suggest using it only in special cases, for example when uploading a file.
提交按钮是为通过POST（本机方法，而不是 ajax）向服务器发送数据而创建的，我建议仅在特殊情况下使用它，例如上传文件时。
If you continue use submit button for ajax request you will have many problems with IE.
如果您继续使用 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>
回答by Bkay
<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");
}
just use return in onclick function it will do good for u
只需在 onclick 函数中使用 return 对你有好处
回答by Rahul Akula
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>
回答by Sridhar
Finally I got the answer
最后我得到了答案
$("form").live("submit", function() {
makeSearch();
return false;
});
