防止页面内的button在点击时刷新页面
我在使用窗体中的button时遇到了一个问题。 我想要那个button来调用函数。 它确实有，但是会导致不必要的结果刷新页面。
我简单的代码是这样的
<form method="POST"> <button name="data" onclick="getData()">Click</button> </form> 点击button，函数被调用刷新页面，这将重置所有我以前的请求，影响当前页面，这是前一个请求的结果。
我应该怎么做，以防止页面刷新？
让getData()返回false。 这将解决它。
<form method="POST"> <button name="data" onclick="return getData()">Click</button> </form>
添加type =“button”到button。
<button name="data" type="button" onclick="getData()">Click</button>
一个button的“type”的默认值是“submit”，它自己发布你的案例中的表单，并使其看起来像一个刷新。
HTML
<form onsubmit="return false;" id="myForm"> </form>
jQuery的
$('#myForm').submit(function() { doSomething(); });
问题是它触发表单提交。 如果您使getData函数return false则应该停止提交表单。
或者，也可以使用事件对象的preventDefault方法：
function getData(e) { e.preventDefault(); }
<form method="POST"> <button name="data" onclick="getData()">Click</button> </form>
而不是使用button标签，使用input标签。 喜欢这个，
<form method="POST"> <input type = "button" name="data" onclick="getData()" value="Click"> </form>
所有你需要做的是把一个types的标签，并使typesbutton。
<button id="btnId" type="button">Hide/Show</button>
在Firefox中出于任何原因，即使我已经return false; 和myform.preventDefault(); 在函数中，它在函数运行后刷新页面。 我不知道这是否是一个好的做法，但它适用于我，我插入javascript:this.preventDefault(); 在action属性中。
正如我所说，我尝试了所有其他的build议，他们在所有的浏览器，但火狐浏览器，如果你有相同的问题，罚款尝试在action属性中添加防止事件javascript:return false; 或javascript:this.preventDefault(); 。 不要用javascript:void(0); 这会破坏你的代码。 不要问我为什么:-)。
我不认为这是一个很好的方法，但在我的情况下，我没有别的select。
更新：
如果您在处理完ajax后收到错误消息，请删除属性操作，然后在onsubmit属性中执行您的函数，然后执行错误返回：
onsubmit="functionToRun(); return false;"
我不知道为什么所有这些与Firefox的麻烦，但希望这个工程。
一种JavaScript方法来禁用button本身
document.getElementById("ID NAME").disabled = true;
一旦所有表单域都满足您的条件，您可以重新启用该button
使用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>
返回function在所有情况下都不起作用。 我试过这个：
<button id="Reset" class="Button-class" onclick="return Reset()">Show result</button>
它没有为我工作。
我试图在函数内部返回false，并为我工作。
function Reset() { . . . return false; }
