后点击禁用提交按钮

问题描述:

这里是我的代码:后点击禁用提交按钮

<form name='frm' id='frm' action='load.asp' method='post' onSubmit='return OnSubmit(this)' style='margin-top:15px'> 
    <input type='submit' name='send' id='send' onclick="this.disabled=true;return true;" value='Send' title='test'> 
</form> 

我要执行我的onsubmit功能,我想所需提交的页面。 在我的网站,没有提交和无功能

我试图在这里重复它,但形式似乎被张贴和我的功能从来没有被执行... http://jsfiddle.net/V7B3T/1/

而且我不知道我应该何时重新激活按钮。

我应该在document.ready中还是在onSubmit函数中执行它?

所以,如果有人可以修理小提琴:)之后,我会比较它与我的代码。 我想:S I迷路

感谢所有

如果你想验证表单或做任何改动的提交之前只提交如果表单是有效的,你可以做这样的事情:

<form id="frm" action="load.asp" method="post" enctype="multipart/form-data"> 
    <input type="submit" name="send" id="send" value="Send" title="test"> 
</form> 

和JavaScript代码:

$('#frm').bind('submit', function (e) { 
    var button = $('#send'); 

    // Disable the submit button while evaluating if the form should be submitted 
    button.prop('disabled', true); 

    var valid = true;  

    // Do stuff (validations, etc) here and set 
    // "valid" to false if the validation fails 

    if (!valid) { 
     // Prevent form from submitting if validation failed 
     e.preventDefault(); 

     // Reactivate the button if the form was not submitted 
     button.prop('disabled', false); 
    } 
}); 

这里有一个工作fiddle

+0

正是我需要的,非常感谢。 – GregM 2012-02-21 14:42:48

如果你不想提交页面本应该做的伎俩:

onclick="this.disabled=true;return false;" 
+0

对不起,我的问题搞砸了,我想提交页面,我想要执行onsubmit函数 – GregM 2012-02-21 13:45:55

我肯定会认为代码移到外部JS(和CSS)文件属于它的地方,但这应该工作:

onclick="this.disabled=true;this.parentNode.submit();" 

既然你禁用提交按钮的onclick它将一旦实际形式submissi被禁用点击发生(onclick在此之前发生)。用JS提交表单应该可以做到。

http://jsfiddle.net/V7B3T/4/

编辑:关于重新启用按钮,将要发生后,你的OnSubmit()功能已经跑我猜。

+0

谢谢,我试过这个,但是我的onSubmit函数没有执行 – GregM 2012-02-21 13:50:56

+0

好的,然后简单地运行你的'OnSubmit()'函数,而不是提交表单:'onclick =“this.disabled = true; OnSubmit(this.parentNode);' – powerbuoy 2012-02-21 13:51:45

+0

最短,最简单的解决方案,谢谢 – 2017-09-11 06:43:19

如果您的表单实际上做了回发,您将有效更改页面,因此无需担心重新启用按钮(页面加载后会发生这种情况)。

此外,由于您使用的是jQuery,因此您可以正确使用它,并通过附加使用jQuery函数的事件处理程序而不是HTML元素上的onclick,onsubmit等属性来分隔HTML标记和Javascript。

更新的HTML:

<form name='frm' id='frm' action='http://jsfiddle.net/' enctype='multipart/form-data' method='post' style='margin-top:15px'> 
    <input type='submit' name='send' id='send' value='Send' title='test'> 
</form> 

更新的Javascript:

function submitForm(form) { 
    alert("submitted"); 
} 

$('#send').click(function(e) { 
    this.disabled = true; 
}); 

$('#frm').submit(function(e) { 
    submitForm(this);  
}); 

Working jsFiddle

你需要包装,在一个$(document).ready(function() {...});呼吁实际页面上使用 - 我离开因为jsFiddle无论如何都会执行任何提供的Javascript onLoad。

+0

不适用于最新版本Chrome。看起来,禁用按钮可以防止表单提交。 – jmarceli 2015-08-13 07:44:38

+0

@jmarceli是的,看起来他们已经改变了一些东西,我想知道这是否是故意的... – 2015-08-13 08:12:29