Question

我在使用表单内的按钮时遇到问题。我想要那个按钮来调用功能。它确实如此，但是由于不需要的结果，它刷新了页面。

我的简单代码就像这样

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

单击该按钮时，将通过刷新页面调用该函数，该页面将重置我以前的所有请求，该请求会影响当前页面，这是前一个请求的结果。

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

Answer 1

在按钮上添加type =“button”。

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

按钮的“类型”的默认值是“提交”，自我在您的情况下发布表单并使其看起来像刷新。

Answer 2

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

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

Answer 3

您需要做的就是输入一个类型标签并制作类型按钮。

＆＃13;

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

＆＃13;

解决了这个问题

Answer 4

问题是它会触发表单提交。如果您创建getData函数return false，则应该停止提交表单。

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

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

Answer 5

HTML

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

的jQuery

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

Answer 6

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

使用输入标记，而不是使用按钮标记。像这样，

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

Answer 7

禁用按钮本身的javascript方法

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

所有表单字段满足您的条件后，您可以重新启用按钮

使用Jquery将是这样的

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

Answer 8

在Firefox中出于任何原因即使我在函数中有return false;和myform.preventDefault();，它也会在函数运行后刷新页面。我不知道这是不是一个好习惯，但它适用于我，我在动作属性中插入javascript:this.preventDefault();。

正如我所说，我尝试了所有其他建议并且它们在所有浏览器中都能正常工作但Firefox如果遇到同样的问题，请尝试在操作属性中添加阻止事件javascript:return false;或{{1} }。不要尝试使用javascript:this.preventDefault();来破坏您的代码。不要问我为什么： - ）。

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

更新

如果您收到错误...处理ajax后，删除属性操作，并在javascript:void(0);属性中执行您的函数，然后返回false：

onsubmit

我不知道为什么所有这些都与Firefox有关，但希望这有效。

Answer 9

在所有情况下，返回功能都不起作用。我试过这个：

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

它对我没用。

我试图在函数内部返回false，它对我有效。

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

Answer 10

我遇到了同样的问题。问题出在onclick函数上。函数getData应该没有任何问题。它的工作原理是使onclick函数返回false。

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

Answer 11

如果您的按钮是默认的“按钮”，请确保您明确设置了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

});

Answer 12

这是最好的解决方案：

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

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

Answer 13

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

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

Answer 14

在点击按钮时调用的函数的开头添加-

示例：

按钮代码：

 ==4 & (

Answer 15

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

您将需要重命名该页面才能不重新加载该函数

Answer 16

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

单击窗体中的按钮时阻止刷新页面

16 个答案:

HTML

的jQuery