www.kaminskiy-web.com | contact@kaminskiy-web.com
Статьи для веб-мастера - Kaminskiy-web

Главная страницаОбо мнеКонтактная информация
Статьи HTML и CSS JavaScript PHP и MySQL Раскрутка сайтов Хостинг Рейтинг украинского хостинга Анекдоты Анекдотов стрит

Защита от мультисабмита

Автор статьи: Сергей Каминский

Одним из наиболее распространенных способов взаимодействия между пользователем и сайтом являются формы. Это позволяет делать онлайн-заказы и общаться с другими посетителями на сайте. Но проблема в том, что пользователи после заполнения формы по несколько раз подряд нажимают кнопку отправки данных, надеясь ускорить таким образом процес передачи информации, что приводит к появлению в базе нескольких идентичных записей.

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

Защищаем форму от мультисабмита

Чтобы избежать многократного нажатия кнопки пользователем, мы будем ее деактивировать после первого нажатия и менять текст кнопки, например, на "Подождите, пожалуйста!". Это, во-первых, исключит возможность повторного нажатия, а во-вторых мы таким образом сообщим пользователю о том, что его данные обрабатываются и ему нужно просто немного подождать. Делается это следующим образом:

<form onsubmit="JavaScript:this.subbut.disabled=true;
this.subbut.value='Подождите, пожалуйста!';" 
action="http://www.kaminskiy-web.com/submit.php" method="POST">
<p>Ваше имя: <input type="text" name="fio" value="" /></p>
<p><input type="submit" name="subbut" value="Отправить" /></p>
</form>

После нажатия на кнопку она примет следующий вид:

Защита от мультисабмита
Кнопка станет неактивной после нажатия и поменяет текст

Тестируем работу кнопки

Совсем не обязательно отправлять скрипту данные чтобы протестировать кнопку. Для этого можно заменить значение action="" и поставить вместо адреса скрипта, который будет обрабатывать данные отправленные через форму, следующий код javascript:void(0); В результате при нажатии на кнопку данные не будут никуда передаваться, а кнопка будет работать точно также:

<form onsubmit="JavaScript:this.subbut.disabled=true;
this.subbut.value='Подождите, пожалуйста!';" 
action="javascript:void(0);" method="POST">
<p>Ваше имя: <input type="text" name="fio" value="" /></p>
<p><input type="submit" name="subbut" value="Отправить" /></p>
</form>

Вот таким нехитрым способом можно защитить сайт от мультисабмита и предотвратить повторную отправку одних и тех же данных пользователем.

Другие записи по теме в разделе статьи по JavaScript

Копирование статьи запрещено.