Question

我有一个提交按钮和以下代码，点击它后会执行某些操作：

<input name="Update" class="LongSubmit" id="Update" type="submit" WaitingValue="Updating..." value="Update"/>

        $('.LongSubmit').click(function() {
            $(this).attr('disabled', 'disabled');
            $(this).addClass('AjaxInProgress');
            $(this).val($('.LongSubmit').attr('WaitingValue'));
            $(this).closest('form').submit(); // Added so it submits the form
        })

我发现当我添加这个没有注释行的处理程序时，表单没有提交，所以我添加了它，现在表单已经提交了。

但是，如果我点击提交按钮点击帖子中的正常表单，则会显示密钥Update，但是当我在点击处理程序中以编程方式执行该操作时，密钥不在那里。

如何处理提交按钮的点击事件而不影响表单的POST（即有update键）？
（或者我怎样才能完全仿效处理程序不在那里？）

正如Zefiryn指出的那样，这是因为我禁用了按钮，但我确实希望这样做以防止多次点击。

Answer 1

如果您未禁用提交按钮，则可以使用其他技术来阻止双重提交。例如：

var submitFlag = 0;
$(function(){
    $('form').submit(function(){
        return submitFlag++ == 0;
    });
});

这将阻止您的表单的任何双重提交。该标志将在页面重新加载或回发时重置（如果您使用Ajax，您可以扩展它以在ajax响应上重置此标志）。这可以帮到你吗？

Answer 2

密钥更新来自更新输入。这是提交按钮，但提交按钮总是发送POST，所以我不知道问题出在哪里。如果您要从POST中删除此字段，可以将<input>更改为<button>（或任何其他标记），并在其上添加将提交表单的点击处理程序。

Answer 3

我已经设法通过Zefiryn的帮助解决了这个问题，只有在提交表单后才禁用该按钮：

    $(function() {

        $('.LongSubmit').click(function() {
            $(this).closest('form').submit();
            $(this).addClass('AjaxInProgress');
        })

        function DisableAjaxButtons() {
            $('.AjaxInProgress').val($('.AjaxInProgress').attr('WaitingValue'));
            $('.AjaxInProgress').attr('disabled', 'disabled');
        }

        $('form').submit(function() {
            setTimeout(DisableAjaxButtons, 1);
        })
    });

我仍然想知道是否有人有任何想法（IMO）一些什么hacky解决方案创建一个计时器只是在提交表单后发生。

Jquery处理提交按钮的点击事件而不会中断表单帖子

3 个答案: