Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Блокирование кнопки на 10 секунд после нажатия (https://javascript.ru/forum/css-html/65042-blokirovanie-knopki-na-10-sekund-posle-nazhatiya.html)

sergofedor06 21.09.2016 17:35

Блокирование кнопки на 10 секунд после нажатия
 
Привет!
есть такая форма добавления комментария, добавление происходит без перезагрузки страницы (AJAX)

<form action="#" id="comments_add_form">
ваше имя
<input name="user_name" type="text" id="user_name">
коментарий
<textarea name="comment_text" id="comment_text"></textarea>
<input class="add_comment" value="Добавить коментарий " type="submit"> 
</form>



но появилась проблема, если соеденение с базой быстрое в данный момент то отзыв появляется
на сайте мнгновенно после нажатия на кнопку (Добавить коментарий)
но частенько бывает что нажимая на кнопку (Добавить коментарий) комент не добавляет сразу на сайт
я снова тыкаю по кнопке и коментарий добавляет несколько раз в зависимости сколько
раз нажал на кнопку (Добавить коментарий)
также происходит если посетители добавляют коментарий!


Подскажите пожалуйста решение что-то вроде если посетитель первый раз нажал на кнопку
(Добавить коментарий) то кнопка блокируется на 10 до секунд и все последующие нажатия на нее не учитываются
спасибо большое!

вот сама кнопка
<input class="add_comment" value="Добавить коментарий " type="submit">

рони 21.09.2016 17:56

Цитата:

Сообщение от sergofedor06
добавление происходит без перезагрузки

где код? добавить переменную(флаг) в код поставьте
if(flag) return;
else flag = true; таймер( flag = false , 10000)

Coriolan161 21.09.2016 18:08

sergofedor06,
А я набыдлокодил...))) Попробуй потыкать.

1) Надо переменную над обработчиком
var clickTime = null;


2) Условие в обработчике

var currentClickTime;
var $submit = document.getElementById('yourButton');

 if (!clickTime) {
   clickTime = new Date().getTime();
   $submit.setAttribute('disabled', '');
 } else {
     currentClickTime = new Date().getTime();

     if (currentClickTime - clickTime <= 10000) return;
     else {
       $submit.removeAttribute('disabled');
       clickTime = null;
     };
 };

рони 21.09.2016 18:31

Coriolan161,
а какой смысл кнопку отключать?

sergofedor06 21.09.2016 19:27

Спасибо!

что мне нужно прописать в yourButton
Цитата:

Сообщение от Coriolan161
var $submit = document.getElementById('yourButton');

исходя из того что кнопка
<input class="add_comment" value="Добавить комментарий " type="submit">


может в кнопке тоже нужно добавить что-то?

рони 21.09.2016 19:38

sergofedor06,
по классу
var $submit = document.querySelector('.add_comment');


но это разве отменит отправку по enter?

sergofedor06 21.09.2016 19:42

при нажатии на enter у меня отправка не идет!

sergofedor06 21.09.2016 19:53

var clickTime = null;




var currentClickTime;
var $submit = document.querySelector('add_comment');

if (!clickTime) {
clickTime = new Date().getTime();
$submit.setAttribute('disabled', '');
} else {
currentClickTime = new Date().getTime();

if (currentClickTime - clickTime <= 20000) return;
else {
$submit.removeAttribute('disabled');
clickTime = null;
};
};




разместил в скрипте, терь при нажатии на кнопку идет перезагрузка страницы! и урл меняется, что то не то

рони 21.09.2016 20:05

Цитата:

Сообщение от sergofedor06
var $submit = document.querySelector('add_comment');

где точка в селекторе?

sergofedor06 21.09.2016 20:07

я ее убрал, как с ней так и без толку нет


Часовой пояс GMT +3, время: 15:39.