Устранение щелчков при отправке веб-формы
-
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 будет анимирован.