Как отправить форму только однажды после нескольких, нажатие отправляет?
У меня есть проблема, что, когда я пытаюсь отправить форму путем нажатия на кнопку отправки, она занимает время для регистрации запроса во время этого, если я, снова нажимают на Кнопку отправки, которую она снова отправит всем параметрам, и параметры сохраняются дважды, трижды.... и так далее.
Я не знаю, как ограничить кнопку отправки так, чтобы форма не должна была быть отправлена дважды. Я думаю, когда я нажал на, утверждают, что я должен отключить кнопку отправки так, чтобы пользователь не мог нажать ее снова, это правильный подход к выполнению этого?
3 ответа
<input type="submit" onclick="this.disabled = true" value="Save"/>
Отключение кнопки - это одно из решений, но потенциально создает проблему для пользователей клавиатуры, которые просто нажимают Enter для отправки формы. В этом сценарии кнопка не будет отключена. Самым надежным методом будет обработка события onsubmit следующим образом:
(function () {
var allowSubmit = true;
frm.onsubmit = function () {
if (allowSubmit)
allowSubmit = false;
else
return false;
}
})();
(ну, настолько надежным, насколько это вообще возможно при включенном JS). Вы можете отключить кнопку в качестве визуального подтверждения для конечного пользователя, что форма может быть отправлена только один раз.
Мне нравится простота и прямота ответа Зойдберга .
Но если вы хотите подключить этот обработчик, используя код, а не разметку (некоторые люди предпочитают полностью разделять разметку и код), здесь используется Prototype :
document.observe('dom:loaded', pageLoad);
function pageLoad() {
var btn;
btn = $('idOfButton'); // Or using other ways to get the button reference
btn.observe('click', disableOnClick);
}
function disableOnClick() {
this.disabled = true;
}
или вы можете использовать анонимный функции (я их не фанат):
document.observe('dom:loaded', function() {
var btn;
btn = $('idOfButton'); // Or using other ways to get the button reference
btn.observe('click', function() {
this.disabled = true;
});
});
Выполнение этого с использованием jQuery будет выглядеть очень похоже.