当表单内的按钮被点击时，我该如何防止页面刷新？

Question

我在使用表单内的按钮时遇到了问题。我希望该按钮调用函数。它确实会调用，但不期望的结果是它会刷新页面。

我的简单代码如下:

<form method="POST">
    <button name="data" onclick="getData()">Click</button>
</form>

点击按钮时，该函数被调用并刷新页面，这将重置所有之前的请求，影响到当前页面，因为它是上一个请求的结果。

我应该怎么做才能防止页面刷新？

- bunkdeath

---

你必须指定参数，如果你简单地使用window.location = window.location.href;它会刷新整个页面并重置所有之前的请求。请查看此链接：https://dev59.com/3HVC5IYBdhLWcg3w9GLM - linguini

可能是重复的问题：如何使HTML按钮不重新加载页面 - Alex Angas

@bunkdeath：应该接受这个答案。 - Jad Chahine

@JadChahine 对不起，我没有意识到我没有接受答案，谢谢你指出来。当时我是个初学者，不知道自己做了什么或没做什么。但我不会接受你提到的那个答案，而是会接受当时帮助我的那个答案 :) - bunkdeath

Answer 1

将按钮添加type="button"属性。

<button name="data" type="button" onclick="getData()">Click</button>

的默认 type 值为 submit，这会导致在你的情况下自动提交表单并看起来像是一次刷新。

- detale

---

除了这个会阻止HTML5表单验证（例如输入type="email"）。 - 2540625

您可以在onclick事件中添加'return false;'以防止默认行为：onclick="getData(); return false;" - JBaczuk

这是最佳选择。尽管“return false”在内联中可能有效，但我不知道在添加事件侦听器时是否有这样的选项。指定 type="button" 真的很有帮助。 - Forever Noob

Answer 2

让getData()返回false。这将修复它。

<form method="POST">
    <button name="data" onclick="return getData()">Click</button>
</form>

- JNDPNT

---

确实。onclick函数必须返回false，而不是getData。 - Quentin

这就是我想表达的，好的，修改了答案以使其更清晰。 - JNDPNT

不需要改变函数本身，只需使用onclick="getData(); return false;"即可。 - user6269864

type="button" 真的是关键。 - devasia2112

为什么会发生这种情况？ 我想更多地了解这个。 - Katty T. enby cat.

Answer 3

你需要做的就是加一个类型标签并将类型设置为按钮。

<button id="btnId" type="button">Hide/Show</button>

问题得到解决。

- user8564339

---

你能详细说明并解释一下为什么吗？ - mjk

按钮的默认行为是在表单内时提交类型，将其更改为按钮类型后，可以避免提交。 - Ganesh Kodiganti

这是一个很好的解释，@Ganesh Kodiganti！ - Katty T. enby cat.

Answer 4

问题在于它会触发表单提交。如果您使 getData 函数返回 false，则应该可以阻止表单提交。

或者，您也可以使用事件对象的 preventDefault 方法：

function getData(e) {
    e.preventDefault();
}

- James Allardice

---

将要传递的点击事件。 - JNDPNT

除非进行进一步修改，否则事件对象将不会被传递。 - Quentin

<button name="data" onclick="getData($event)">点击</button> - RoboMex

Answer 5

HTML

<form onsubmit="return false;" id="myForm">
</form>

jQuery

$('#myForm').submit(function() {
    doSomething();
});

- Mehdiway

---

$('.myForm) 应该改为 $('#myForm)。 - Mutant

Answer 6

如果你的按钮默认是 "button"，请确保显式设置type属性，否则WebForm将默认将其视为提交按钮。

如果您要使用JavaScript，请按如下方式操作。

<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

});

- Thusitha Deepal

Answer 7

<form method="POST">
    <button name="data" onclick="getData()">Click</button>
</form>

使用 input 标签代替 button 标签。像这样：

<form method="POST">
    <input type = "button" name="data" onclick="getData()" value="Click">
</form>

- Manik Sood

---

但是这并没有创建一个 button type='button' 按钮。 - Pardeep Jain

Answer 8

一个禁用按钮本身的 JavaScript 方法。

document.getElementById("ID NAME").disabled = true;

所有表单字段都符合您的标准后，您可以重新启用按钮。

使用Jquery将类似于以下内容：

$( "#ID NAME" ).prop( "disabled", true);

- repzero

Answer 9

这个是最好的解决方案：

<form  method="post"> 
    <button  type="button" name="data" onclick="getData()">Click Me</button>
</form>

注意：我的代码非常简单。

- HAPPY SINGH

Answer 10

在Firefox中，即使我在函数中使用了return false;和myform.preventDefault();，它仍然会在函数运行后刷新页面。我不知道这是否是一个好的做法，但对我来说有效，我在action属性中插入了javascript:this.preventDefault();。

正如我所说，我尝试了所有其他建议，在所有浏览器中都很好用，但在Firefox中不行，如果你有同样的问题，请尝试在action属性中添加prevent事件，可以是javascript:return false;或javascript:this.preventDefault();。不要尝试使用javascript:void(0);，否则会破坏你的代码。别问我为什么 :-)

我不认为这是一种优雅的方式，但在我的情况下，我别无选择。

更新：

如果在ajax处理后收到错误...，那么请删除属性action，并在onsubmit属性中执行你的函数，然后返回false：

onsubmit="functionToRun(); return false;"

我不知道为什么Firefox会出现这些麻烦，但希望这个方法能够解决问题。

- raphie