单击表单内的按钮时，如何防止页面刷新？

在表单中使用按钮时出现问题。我想让那个按钮调用函数。是的，但是它会刷新页面，这是不希望看到的结果。

我的简单代码是这样的

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

单击按钮时，该函数将在页面刷新后被调用，这将重置我以前的所有请求，从而影响当前页面，而当前页面是以前的请求的结果。

如何防止页面刷新？

415033 次浏览
小开
最佳答案

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

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

问题是它会触发表单提交。如果你使 getData函数 return false，那么它应该停止提交的形式。

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

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

将 type="button"添加到按钮。

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

按钮的默认值 type是 submit，它会自动将表单发布到您的用例中，并使其看起来像是刷新。

小开

超文本标示语言

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

JQuery

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

不管出于什么原因，在 Firefox 中，即使函数中有 return false;和 myform.preventDefault();，它也会在函数运行后刷新页面。我不知道这是否是一个好的实践，但它对我很有用，我在 action 属性中插入了 javascript:this.preventDefault();。

正如我所说的，我尝试了所有其他的建议，它们在所有浏览器中都工作得很好，但是 Firefox，如果你有同样的问题，尝试在 action 属性 javascript:return false;或 javascript:this.preventDefault();中添加阻止事件。不要尝试与 javascript:void(0);将破坏您的代码。不要问我为什么:。

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

更新:

如果在处理 ajax 之后收到一个错误... ... ，那么删除属性操作，在 onsubmit属性中，执行函数，然后返回错误:

onsubmit="functionToRun(); return false;"

我不知道为什么 Firefox 会有这么多麻烦，但是希望它能起作用。

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

不要使用按钮标签，而是使用输入标签,

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

禁用按钮本身的 javascript 方法

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

一旦所有表单字段都满足条件，就可以重新启用按钮

使用 Jquery 类似于下面这样

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

您可以使用 ajax 和 jquery 来解决这个问题:

<script>
function getData() {
$.ajax({
url : "/urlpattern",
type : "post",
success : function(data) {
alert("success");
}
});
}
</script>
<form method="POST">
<button name="data" type="button" onclick="getData()">Click</button>
</form>
小开

所有你需要做的就是放一个类型标签，并使类型按钮。

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

That solves the issue

小开

返回函数并非在所有情况下都有效。 我试过了:

<button id="Reset" class="Button-class" onclick="return Reset()">Show result</button>

对我没用。

我尝试在函数内部返回 false，结果成功了。

function Reset()
{
.
.
.
return false;
}
小开

我也面临着同样的问题。问题在于 onclick函数。函数 getData应该没有任何问题。它通过使 onclick函数返回 false 来工作。

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

如果您的按钮是默认的“按钮”，请确保您显式地设置了 type 属性，否则 WebForm 将默认将其视为提交。

如果你像这样使用 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


});
小开

这是最好的解决办法:

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

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

小开

我在@JNDPNT 上更新了答案，这样函数(getData ())就不必返回 false;

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

在单击按钮时要调用的函数的开始部分添加 e.preventDefault();

例如:

    const signUp = (e) => {
e.preventDefault()
try {
} catch (error) {
console.log(error.message)
}
}

按钮代码:

            <input
type='submit'
name='submit-btn'
id='submit-btn'
value='Sign Up'
onClick={signUp}
/>
小开

我发现的一个简单问题是，如果您试图调用的函数名为 submit，则表单将以两种方式提交。

您需要重命名该函数，以便不重新加载页面


提交答案