Question

我有一个使用jQuery表单和jQuery验证器插件发布的大表单。表单非常大，当您按下提交按钮时，需要一些时间才能发生任何事情。为防止人们多次单击提交按钮，我在document_ready函数中使用以下内容：

$('#submitbutton').click(function(){
    $(this).attr("disabled", "disabled");
    $(this).parents('form').submit();
});

这是按钮： <input id="submitbutton" type="button" value="Заказать!" />

这会禁用按钮，但不会立即停用，但只是在提交发生之前，这不是我想要的。什么是立即禁用按钮的最佳方法？

我有人点击按钮5或6次弄得一团糟（这是我为内部使用而写的简单订单）。由于这种延迟，很难采取任何其他措施来阻止在客户端反复发布完全相同的数据。

无论如何，在客户端也应该有一种优雅的方法来解决这个问题......

现在我只能在服务器端解决它。（无论如何都应该这样做。）

Answer 1

$('#submitbutton').click(function(){
    $(this).hide().attr("disabled", "disabled");
    $(this).parents('form').submit();
});

我发现使用.hide()效果很好。

如果由于某种原因您希望按钮再次出现。你这样做了。

$('#submitbutton').click(function(){
    $(this).hide().attr("disabled", "disabled");
    $(this).parents('form').submit();
    $(this).delay(3000).fadeIn();
});

这将等待3秒，然后淡入。

Answer 2

如果您正在进行点击并检查，那么存储怎么样？ e.g。

$('#submitbutton').click(function()
{

    if ($(this).data('clicked') === undefined)
    {
        $(this).data('clicked') = 'clicked';
        $(this).parents('form').submit();
    }
});

您仍然应该隐藏或禁用该按钮，并设置表格已提交的沙漏或视觉指示器。

Answer 3

您的表单或提交按钮是否会在实际发布数据之前调用某种类型的验证？

如果是这样，请在验证javascript顶部添加.hide()。

Answer 4

我可以想到的可能原因是您的表单中的按钮类型将被提交，因此当您单击表单时，它将被提交。

尝试更改按钮类型或在点击功能中添加preventDefault。

编辑：试试这种方式。

<form id="target" action="/">
    <input type="text" value="Hola">
    <input type="submit" value="Submit">
</form>

然后像这样绑定事件句柄

$( "#target" ).submit(function( event ) {
    alert( "Handler called." );
    event.preventDefault();
});

单击时禁用提交按钮太慢，延迟

4 个答案: