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

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

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

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

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

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


javascript html prototypejs
person Shermozle    schedule 18.09.2008    source источник
comment
ни один ответ не выбран после всего этого времени? лаааааме   -  person matt lohkamp    schedule 08.12.2008
comment
Эм, ты имеешь в виду, кроме того, что я выбрал? (ваш ответ, не меньше) Я не проголосовал за него, потому что, хотя он отвечает на вопрос, это не прототип.   -  person Shermozle    schedule 14.02.2009

Ответы (5)


arrow_upward
2
arrow_downward

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

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

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

person Community    schedule 19.09.2008
comment
Еще лучше, что я обнаружил с jQuery, это onesubmit() manalang.com/jquery/ docs/index.html#onesubmit-fn - person Shermozle; 18.10.2008
comment
Мертвая ссылка в комментарии - person mattumotu; 07.12.2016
comment
Это неудовлетворительно. Код может выполнять проверку и другие задачи после нажатия кнопки, но до фактической отправки. Из-за этого вы не сможете уберечь себя от правильного устранения дребезга клика. - person Csaba Toth; 26.03.2018
comment
да, вау, взрыв из прошлого - я думаю, jquery действительно существует уже более десяти лет! вместо удаления события щелчка (на случай, если вам нужно будет использовать его позже), может иметь смысл отключить кнопку отправки (как отвечено @Fczbkk ниже) или отключить всю форму (как описано здесь) - person matt lohkamp; 27.03.2018

arrow_upward
4
arrow_downward

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

arrow_upward
3
arrow_downward

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

}
person unscriptable    schedule 20.03.2009

arrow_upward
1
arrow_downward

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

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

person Jason Wadsworth    schedule 18.09.2008

arrow_upward
0
arrow_downward

Отправьте форму с помощью AJAX, и GIF будет анимирован.

person aceofspades    schedule 03.12.2010