Question

我正在设置表单的操作并通过div的 onclick 事件提交表单：

<div class="action_button" onclick="document.forms['test'].action='url/to/action';document.forms['test'].submit()">
<span class="action_button_label">Save</span>
</div>

这很好用，但我想使用一些有条件检查action_label_button中'Save'的代码，并且只允许submit（）触发一次。我正在尝试阻止多次保存（这会在我的应用中产生重复数据）。

// disable save buttons onclick (prevent multiple clicks of save buttons)

$('.action_button_label').one('click', function() {
    // if the button is a save button
    if($(this).html().indexOf('Save') != -1) {
        // submit the parent form
            $(this).html('<span class="action_button_label" style="color:gray;">Saving...</span>');
            $(this).parents('form').submit();
    }
});

$('form').bind('submit', function() {
    $(this).find('action_button').attr('onclick', '');
});

此代码似乎不像我预期的那样工作。我担心这里有点超出我的深度，任何指针都会很棒。

Answer 1

尝试替换

$(this).find('action_button').attr('onclick', '');

带

$(this).find('.action_button').attr('onclick', '');

Answer 2

你应该总是处理多个提交服务器端以确保你没有得到它们。但是，您可以隐藏按钮标签以协助此客户端。

$('.action_button_label').one('click', function() {
    // if the button is a save button
    if($(this).html().indexOf('Save') != -1) {
        // submit the parent form
            $('.action_button_label').hide(); //ADD THIS
            $(this).html('<span class="action_button_label" style="color:gray;">Saving...</span>');
            $(this).parents('form').submit();
    }
});

$('form').bind('submit', function() {
    $(this).find('action_button').attr('onclick', '');
});

使用onclick事件提交表单，但只允许一次

2 个答案: