Устранение щелчков при отправке веб-формы

StackOverflow https://stackoverflow.com/questions/97962

  •  01-07-2019
  •  | 
  •  

Вопрос

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

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

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

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

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

Это было полезно?

Решение

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

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

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

Другие советы

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

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

}

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

Видеть: http://www.prototypejs.org/api/form/element#method-disable

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top