单击表单内的按钮时防止刷新页面

使用表单内的按钮时出现问题。我希望该按钮调用功能。它确实可以，但是刷新页面的结果不理想。

我的简单代码是这样的

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

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

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

让我们getData()返回false。这将解决它。

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

添加type="button"到按钮。

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

type按钮的默认值是submit，它会根据您的情况自行发布表单，并使它看起来像刷新一样。

您需要做的只是放置一个类型标签并单击“类型”按钮。

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

那解决了问题

问题在于它触发了表单提交。如果您执行此getData功能return false，则应停止提交表单。

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

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

的HTML

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

jQuery的

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

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

不要使用按钮标签，而要使用输入标签。像这样，

<form method="POST">
    <input type = "button" name="data" onclick="getData()" value="Click">
</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

});

禁用按钮本身的JavaScript方法

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

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

使用一个jQuery将是这样的

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

对于任何理由在Firefox，即使我有return false;，并myform.preventDefault();在功能上，它刷新功能运行后的页面。而且我不知道这是否是一个好习惯，但是对我有用，我javascript:this.preventDefault();在action属性中插入。

就像我说的，我尝试了所有其他建议，这些建议在Firefox以外的所有浏览器中都可以正常工作，如果您遇到相同的问题，请尝试在action属性javascript:return false;或中添加prevent事件javascript:this.preventDefault();。不要尝试使用javascript:void(0);它将破坏您的代码。不要问我为什么:-)。

我认为这不是一种优雅的方法，但就我而言，我别无选择。

更新：

如果在处理ajax之后收到错误...，请删除属性操作，然后在onsubmit属性中执行函数，然后返回假返回值：

onsubmit="functionToRun(); return false;"

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

返回功能并非在所有情况下都起作用。我尝试了这个：

<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>

这是最好的解决方案：

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

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

您可以使用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>