Отклонить клики при отправке веб-формы

Question

Плохо написанная внутренняя система, с которой мы взаимодействуем, испытывает проблемы с обработкой нагрузки, которую мы производим. Хотя они решают проблемы с нагрузкой, мы пытаемся уменьшить любую дополнительную нагрузку, которую мы генерируем, одна из которых заключается в том, что внутренняя система продолжает пытаться обслуживать отправку формы, даже если другая отправка поступила от того же пользователя.

Мы обратили внимание на то, что пользователи дважды щелкают по кнопке отправки формы. Мне нужно отменить эти клики и предотвратить отправку второй формы.
Мой подход (с использованием Prototype) помещает onSubmit в форму, которая вызывает следующую функцию, которая скрывает кнопку отправки формы и отображает «loading ...» div.

function disableSubmit(id1, id2) {
    $(id1).style.display = 'none';
    $(id2).style.display = 'inline';
}

Проблема, с которой я столкнулся при таком подходе, заключается в том, что если я использую анимированный GIF в «loading ...» div, он загружается нормально, но не анимируется во время отправки формы.

Есть ли лучший способ сделать это отскок и продолжать показывать анимацию на странице, ожидая (наконец) загрузки результата формы?

Answer 1

Используя Prototype, вы можете использовать этот код, чтобы посмотреть, была ли отправлена ​​какая-либо форма, и отключить все кнопки отправки, когда это происходит:

document.observe( 'dom:loaded', function() { // when document is loaded
    $$( 'form' ).each( function( form ) { // find all FORM elements in the document
        form.observe( 'submit', function() {  // when any form is submitted
            $$( 'input[type="submit"]' ).invoke( 'disable' );  // disable all submit buttons
        } );
    } );
} );

Это должно помочь пользователям, которые дважды щелкают по кнопкам отправки. Тем не менее, все еще будет возможно отправить форму любым другим способом (например, нажав Enter в текстовом поле). Чтобы предотвратить это, вы должны начать следить за отправкой любой формы после первой и остановить ее:

document.observe( 'dom:loaded', function() {
    $$( 'form' ).each( function( form ) {
        form.observe( 'submit', function() {
            $$( 'input[type="submit"]' ).invoke( 'disable' );
            $$( 'form' ).observe( 'submit', function( evt ) { // once any form is submitted
                evt.stop(); // prevent any other form submission
            } );
        } );
    } );
} );

Answer 2

Все хорошие предложения выше. Если вы действительно хотите «отговорить», как вы говорите, тогда у меня есть отличная функция для этого. Подробнее на unscriptable.com

var debounce = function (func, threshold, execAsap) {

    var timeout;

    return function debounced () {
        var obj = this, args = arguments;
        function delayed () {
            if (!execAsap)
                func.apply(obj, args);
            timeout = null; 
        };

        if (timeout)
            clearTimeout(timeout);
        else if (execAsap)
            func.apply(obj, args);

        timeout = setTimeout(delayed, threshold || 100); 
    };

}

Answer 3

Если у вас есть удобный jQuery, прикрепите событие click (), которое отключает кнопку после первоначальной отправки -

$('input[type="submit"]').click(function(event){
 event.preventDefault();
 this.click(null);
});

такие вещи.

Answer 4

Вы можете попробовать установить флаг «отключен» в элементе input (type = submit) вместо простого изменения стиля Это должно полностью отключить браузер на стороне браузера.

См .: http://www.prototypejs.org/api/form/element#method-disable

Answer 5

Отправьте форму с AJAX, и GIF оживит.