单击后禁用提交按钮

Question

这是我的代码:

<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函数中执行此操作吗？

因此,如果有人可以修复小提琴:)然后我将它与我的代码进行比较.我想:我迷路了

谢谢大家

Answer 1

如果您想在提交之前验证表单或进行任何更改,并且只有在表单有效时才提交,您可以执行以下操作:

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

这是一个工作小提琴.

Answer 2

我肯定会将该代码移动到它所属的外部JS(和CSS)文件中,但这应该有效:

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

由于您正在禁用提交按钮,因此一旦实际的表单提交单击发生,它将被禁用(在此之前发生onclick).使用JS提交表单应该可以解决问题.

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

编辑:关于重新启用按钮,这必须在你的OnSubmit()功能运行后发生我想.

Answer 3

如果您的表单实际上是回发,那么您实际上是在更改页面,因此无需担心重新启用按钮(一旦页面加载就会发生).

此外,由于你使用jQuery,你可能也正确地使用它,并通过附加使用jQuery功能的事件处理程序分离出来,你的HTML标记和Javascript,而不是onclick,onsubmit等HTML元素属性.

更新的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);    
});

工作jsFiddle

你需要将它包装$(document).ready(function() {...});在一个实际页面上使用的调用中 - 我把它留下了,因为jsFiddle无论如何都会执行任何提供的Javascript onLoad.