Каков наилучший подход к отключению (на стороне клиента) кнопки отправки?
-
09-06-2019 - |
Вопрос
Подробности:
- Отключить только после того, как пользователь нажмет кнопку отправки, но перед отправкой обратно на сервер.
- Веб-формы ASP.NET (.NET 1.1)
- Предпочитаю jQuery (если вообще есть библиотека)
- Должен быть включен, если форма перезагружается (т.кредитная карта не удалась)
Мне не обязательно это делать, но если есть простой способ сделать это без необходимости слишком многого менять, я это сделаю.(т.е.если нет простого решения, я, вероятно, не буду этого делать, так что не беспокойтесь о том, что копаете слишком глубоко)
Решение
Для всех кнопок отправки через JQuery это будет:
$('input[type=submit]').click(function() { this.disabled = true; });
Или может быть более полезно сделать это при отправке формы:
$('form').submit(function() {
$('input[type=submit]', this).attr("disabled","disabled");
});
Но я думаю, что мы могли бы дать лучший ответ на ваш вопрос, если бы знали немного больше о контексте.
Если это запрос ajax, вам необходимо снова включить кнопки отправки в случае успеха или неудачи.
Если это стандартная отправка HTTP-формы (кроме отключения кнопки с помощью JavaScript) и вы делаете это для защиты от нескольких отправок одной и той же формы, тогда вам следует иметь какой-то контроль в коде, который имеет дело с отправленные данные, поскольку отключение кнопки с помощью JavaScript может не предотвратить множественную отправку.
Другие советы
Вы можете сделать что-то вроде этого:
$('form').submit(function() {
$(this)
.find(":submit,:image") // get all the submit buttons
.attr({ disabled : 'disabled' }) // disable them
.end() // go back to this form
.submit(function() { // change the onsubmit to always reject.
return false;
})
;
});
Преимущества этого:
- Он будет работать со всеми вашими формами и всеми способами отправки:
- щелчок по элементу отправки
- нажав Enter, или
- звоню
form.submit()
из какого-то другого кода
- Он отключит все элементы отправки:
<input type="submit"/>
<button type="submit"></button>
<input type="image" />
- это действительно коротко.
Я предполагаю, что вы не хотите, чтобы они нажимали кнопку отправки более одного раза во время обработки отправки.
Мой подход заключался в том, чтобы полностью скрыть кнопку и вместо нее отобразить какой-то индикатор состояния (анимированный gif и т. д.).
Вот очень надуманный пример (технически это прототип, но я думаю, что версия jquery будет очень похожа):
<html>
<head>
<script type="text/javascript" src="include/js/prototype.js"></script>
<script type="text/javascript">
function handleSubmit()
{
$('submit').hide();
$('progressWheel').show();
return true;
}
</script>
</head>
<body>
<img src="include/images/progress-wheel_lg.gif" id="progressWheel" style="display:none;"/>
<input type="submit" name="submit" id="submit" value="Submit" onclick="handleSubmit();"/>
</body>
</html>
в JQuery:
$('#SubmitButtonID').click(function() { this.disabled = true; });
Следует помнить, что не следует отключать кнопку до отправки формы.Если вы отключите кнопку с помощью javascript в событии OnClick, вы можете потерять отправку формы.
Поэтому я бы посоветовал вам скрыть кнопку с помощью JavaScript, поместив изображение над ней или переместив кнопку за пределы видимого диапазона.Это должно позволить отправить форму нормально.
Есть три способа отправить форму, которую следует заполнить.Используйте предложения Дэвида Маклафлина и Джимми.Один отключит элемент формы кнопки отправки, а другой отключает отправку базовой HTML-формы.
В-третьих, они не отключат Javascript от выполнения form.submit().А OnSubmit="return false"
Метод применяется только тогда, когда пользователь нажимает кнопку отправки или нажимает Enter в элементе формы ввода.Также потребуется обработка сценариев на стороне клиента.
Как насчет
Код позади:
btnContinue3.Attributes.Item("onclick") = "disableSubmit()"
Javascript:
function disableSubmit() {
document.getElementById('btnContinue3').onclick = function() {
alert('Please only click once on the submit button!'); return false;
};
}
Это не решает проблему того, что произойдет, если время обратной передачи истечет, но в остальном у меня это сработало.