Javascript 单击表单内的按钮时防止刷新页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7803814/
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
prevent refresh of page when button inside form clicked
提问by bunkdeath
I have an issue while using buttons inside form. I want that button to call function. It does, but with unwanted result that it refresh the page.
我在表单内使用按钮时遇到问题。我想要那个按钮来调用函数。它确实如此，但它刷新了页面，但产生了不希望的结果。
My simple code goes like this
我的简单代码是这样的
<form method="POST">
<button name="data" onclick="getData()">Click</button>
</form>
On clicking the button, the function gets called with page refreshed, which resets all my previous request which affects the current page which was result of the previous request.
单击该按钮时，该函数将在页面刷新时调用，这会重置我之前的所有请求，这些请求会影响作为前一个请求的结果的当前页面。
What should I do to prevent the page refresh?
我应该怎么做才能防止页面刷新？
采纳答案by JNDPNT
Let getData()return false. This will fix it.
让getData()返回假。这将修复它。
<form method="POST">
<button name="data" type="button" onclick="getData()">Click</button>
</form>
回答by detale
Add type="button" to the button.
将 type="button" 添加到按钮。
<button name="data" type="button" onclick="getData()">Click</button>
The default value of "type" for a button is "submit", which self posts the form in your case and makes it look like a refresh.
按钮的“类型”的默认值是“提交”，它会在您的案例中自行发布表单并使其看起来像刷新。
回答by James Allardice
The problem is that it triggers the form submission. If you make the getDatafunction return falsethen it should stop the form from submitting.
问题是它触发了表单提交。如果您创建该getData功能，return false则它应该停止提交表单。
Alternatively, you could also use the preventDefaultmethod of the event object:
或者，您也可以使用preventDefault事件对象的方法：
function getData(e) {
e.preventDefault();
}
回答by user8564339
All you need to do is put a type tag and make the type button.
您需要做的就是放置一个类型标签并制作类型按钮。
<button id="btnId" type="button">Hide/Show</button>That solves the issue
这解决了问题
回答by Mehdiway
HTML
HTML
<form onsubmit="return false;" id="myForm">
</form>
jQuery
jQuery
$('#myForm').submit(function() {
doSomething();
});
回答by Manik Sood
<form method="POST">
<button name="data" onclick="getData()">Click</button>
</form>
instead of using button tag, use input tag. Like this,
而不是使用按钮标签，使用输入标签。像这样，
<form method="POST">
<input type = "button" name="data" onclick="getData()" value="Click">
</form>
回答by Thusitha Deepal
If your button is default "button" make sure you explicity set the type attribute, otherwise the WebForm will treat it as submit by default.
如果您的按钮是默认的“按钮”，请确保您明确设置了 type 属性，否则 WebForm 将默认将其视为提交。
if you use js do like this
如果你使用 js 这样做
<form method="POST">
<button name="data" type="button" id="btnData" onclick="getData()">Click</button>
</form>
**If you use jquery use like this**
<form method="POST">
<button name="data" type="button" id="btnData">Click</button>
</form>
$('#btnData').click(function(e){
e.preventDefault();
// Code goes here
getData(); // your onclick function call here
});
回答by repzero
A javascript method to disable the button itself
一种禁用按钮本身的javascript方法
document.getElementById("ID NAME").disabled = true;
Once all form fields have satisfied your criteria, you can re-enable the button
一旦所有表单字段都满足您的条件，您可以重新启用该按钮
Using a Jquery will be something like this
使用 Jquery 将是这样的
$( "#ID NAME" ).prop( "disabled", true);
回答by Harsha Vardhini
Return function is not working in all the cases. I tried this:
返回功能并非在所有情况下都有效。我试过这个：
<button id="Reset" class="Button-class" onclick="return Reset()">Show result</button>
It didnt work for me.
它对我不起作用。
I tried to return false inside the function and it worked for me.
我试图在函数内返回 false 并且它对我有用。
function Reset()
{
.
.
.
return false;
}
回答by Tasnim Fabiha
I was facing the same problem. The problem is with the onclickfunction. There should not be any problem with the function getData. It worked by making the onclickfunction return false.
我面临同样的问题。问题出在onclick函数上。函数应该没有任何问题getData。它的工作原理是使onclick函数返回 false。
<form method="POST">
<button name="data" onclick="getData(); return false">Click</button>
</form>
