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

2020/11/08 11:22 · javascript ·  · 0评论

我在表单内使用按钮时遇到问题。我希望该按钮调用功能。它确实可以,但是刷新页面的结果令人讨厌。

我的简单代码是这样的

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

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

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

它对我没有用。

我试图在函数内部返回false,它为我工作。

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

对于任何理由在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会遇到所有这些麻烦,但是希望它能起作用。

我面临着同样的问题。问题出在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>
本文地址:http://javascript.askforanswer.com/danjibiaodanneideanniushifangzhishuaxinyemian.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!