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

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

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

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

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

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

5 3
javascript html prototypejs

5 ответов:

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

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

Что-то в этом роде.

2

Используя 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
            } );
        } );
    } );
} );
4

Все хорошие предложения выше. Если вы действительно хотите "разоблачить", как вы говорите, то у меня есть отличная функция для этого. Подробнее в 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); 
    };

}
3

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

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

1

Отправить форму с помощью AJAX и GIF анимации.

0