禁用提交按钮但仍然得到双重提交

Question

我有一个使用 jqueryvalidation 的表单，并且正在验证提交。发生这种情况时，它会禁用按钮并将其更改为 "Submitting.." 然后提交表单。

问题是，该按钮似乎已禁用，但如果您继续单击它，它将提交多次，导致 X 量的数据进入数据库。

这是处理提交的代码：

submitHandler: function(form) {
    $('#SaveTraining').val('Submitting...');
    $('SaveTraining', this).attr('disabled', 'disabled');
    form.submit();
   // return false;
}

这是按钮：

<input type="submit" id="SaveTraining" name="SaveTraining" class="btn btn-success" <cfif rc.candidateActive EQ 2>disabled</cfif> value="Save Training">

该按钮内置了一点点 CF，用于在候选人处于活动状态时显示或不显示。

有没有其他推荐的方法让这个按钮只点击一次？

Answer 1

您的代码中有错别字，我认为也不需要 , this:

submitHandler: function(form) {
    $('#SaveTraining').val('Submitting...');
    $('#SaveTraining').attr('disabled', 'disabled');
    form.submit();
   // return false;
}

但是当您处理表单提交时，还有其他方法可以调用该提交处理程序（例如在表单上点击输入），您可能也想阻止这些方法。您可以使用如下所示的全局变量来做到这一点。

submitted = false;
.....
submitHandler: function(form) {
    $('#SaveTraining').val('Submitting...');
    $('#SaveTraining', this).attr('disabled', 'disabled');
    (!submitted) {
        // I will submit only this time...
        submitted = true;
        form.submit();
        return true;
    }
   return false;
}

禁用提交按钮但仍然得到双重提交

Disabling Submit button but still getting double submits

jquery

jquery-validate