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">

Rise 21.09.2016 17:55

sergofedor06, AJAX покажи

рони 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 у меня отправка не идет!

Rise 21.09.2016 19:46

sergofedor06, так не делается... но тебе пойдет...

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

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

рони 21.09.2016 20:13

Цитата:

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

... а поставить код внизу страницы и не мудрить?

Coriolan161 21.09.2016 21:27

sergofedor06,
в квериСелектор пихай селектор как есть! С точечкой

sergofedor06 21.09.2016 22:55

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

вот весь мой скрипт на аяксе



$(document).ready(function () {
    function AjaxRefresh(url, page_anchor, form_id) {
        var url = url;
        var page_anchor = page_anchor;
        jQuery.ajax({
            url: url, //Адрес подгружаемой страницы
            type: "POST", //Тип запроса
            data: {comments_get_all: 1, anchorFromAjax: page_anchor},
            success: function (response) { //Если все нормально
                $('#comments_field').html(response);
                $("#"+form_id+" input[type='text'], textarea").val("");
                $("#"+form_id+" #result").fadeIn(400,
                    function(){
                        $('this')
                            .css('display', 'block')
                            .animate({opacity: 1, top: '50%'}, 200)
                    });
                document.images.cryptogram.src='captcha/cryptographp.php?cfg=0&&'+Math.round(Math.random(0)*1000)+1;    // указать путь до файла!
            },
            error: function (response) { //Если ошибка
                alert(response);
            }
        });
    }

    function AjaxFormRequest(form_id, url, page_anchor) {
        var form_id = form_id;
        var url = url;
        var page_anchor = page_anchor;
        jQuery.ajax({
            url: url, //Адрес подгружаемой страницы
            type: "POST", //Тип запроса
            dataType: "html", //Тип данных
            data: jQuery("#" + form_id).serialize(),
            success: function (response) { //Если все нормально
                if (response == '0') {
                    alert('есть ссылки в коментарии');
                } else {
                    AjaxRefresh(url, page_anchor, form_id);
                }
            },
            error: function (response) { //Если ошибка
                alert(response);
            }
        });
    }

    function AjaxWordsCheck(url, str) {
        var url = url;
        var str = str;
        jQuery.ajax({
            url: url, //Адрес подгружаемой страницы
            type: "POST", //Тип запроса
            data: {words: str},
            dataType: "html",
            success: function (response) { //Если все нормально
                return response;
            },
            error: function (response) { //Если ошибка
                return false;
            }
        });
    }

    function AjaxCapchaCheck(url, capcha, anchor, form_id) {
        var url = url;
        var capcha = capcha;
        var page_anchor = anchor;
        var form_id = form_id;
        jQuery.ajax({
            url: url, //Адрес подгружаемой страницы
            type: "POST", //Тип запроса
            data: {capcha: capcha},
            success: function (response) { //Если все нормально
                if (response == '1') {
                    AjaxFormRequest(form_id, url, page_anchor);
                } else {
                    alert('ошибка защитного кода');
                    document.images.cryptogram.src='captcha/cryptographp.php?cfg=0&&'+Math.round(Math.random(0)*1000)+1;    // указать путь до файла!
                    return false;
                }
            },
            error: function (response) { //Если ошибка
                alert(response);
            }
        });
    }

    $('body').on('click', "#comments_add_form input[type='submit']", function (e) {
        e.preventDefault();
        var user_name = $("#comments_add_form  #user_name");
        if (user_name.val().length >= 3) {
            var comment_text = $("#comments_add_form  #comment_text");
            if (comment_text.val().length >= 30) {
                var capcha = $("#comments_add_form #capcha");
                var anchor = $("#comments_add_form  #anchor").val();
                if (user_name.val() == "") {
                    alert("введите имя");
                } else if (comment_text.val() == "") {
                    alert("введите коментарий")
                } else {
                    AjaxCapchaCheck('comments.func.php', capcha.val(), anchor, 'comments_add_form');    // указать путь до файла!
                }
            } else {
                alert("минимум 30 символов");
            }
        } else {
            alert("минимум 3 символа");
        }
    });
});

sergofedor06 22.09.2016 10:45

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

рони 22.09.2016 11:00

sergofedor06,
var flag;
    $('body').on('click', "#comments_add_form input[type='submit']", function (e) {
        e.preventDefault();
        var el = this;
        if(flag)return;
        else {flag = true;
el.setAttribute('disabled', 'disabled');
window.setTimeout(function() {
    el.removeAttribute('disabled');
    flag = false;
}, 10000)};
        var user_name = $("#comments_add_form  #user_name");

sergofedor06 22.09.2016 11:13

Спасибо рони
я так понимаю что ваш скрипт мне нужно добавить в мой скрипт

перед этой строкой

var user_name = $("#comments_add_form #user_name");

Manyasha 22.09.2016 11:16

sergofedor06,
может так получится?
function AjaxCapchaCheck(url, capcha, anchor, form_id) {
        var url = url;
        var capcha = capcha;
        var page_anchor = anchor;
        var form_id = form_id;
        jQuery.ajax({
            url: url, //Адрес подгружаемой страницы
            type: "POST", //Тип запроса
            data: {capcha: capcha},
            success: function (response) { //Если все нормально
                if (response == '1') {
                    AjaxFormRequest(form_id, url, page_anchor);
                } else {
                    alert('ошибка защитного кода');
                    document.images.cryptogram.src='captcha/cryptographp.php?cfg=0&&'+Math.round(Math.random(0)*1000)+1;    // указать путь до файла!
                    return false;
                }
				//ДОБАВИЛА
				$('.add_comment').prop('disabled', false);
            },
            error: function (response) { //Если ошибка
                alert(response);
				//ДОБАВИЛА
				$('.add_comment').prop('disabled', false);
            }
        });
    }

    $('body').on('click', "#comments_add_form input[type='submit']", function (e) {
        e.preventDefault();
		$('.add_comment').prop('disabled', true);
		//...
    });

sergofedor06 22.09.2016 11:21

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

sergofedor06 22.09.2016 11:30

рони


сделал так с кодом



var flag;



$('body').on('click', "#comments_add_form input[type='submit']", function (e) {
e.preventDefault();




var el = this;
if(flag)return;
else {flag = true;
el.setAttribute('disabled', 'disabled');
window.setTimeout(function() {
el.removeAttribute('disabled');
flag = false;
}, 10000)};



var user_name = $("#comments_add_form #user_name");


терь нет переадресации, но при многократном нажатии всеровно проскакивают дубли в бд

sergofedor06 22.09.2016 11:49

[quote=Manyasha;429437]sergofedor06,
может так получится?
//ДОБАВИЛА
				$('.add_comment').prop('disabled', false);
            },
            error: function (response) { //Если ошибка
                alert(response);
				
				$('.add_comment').prop('disabled', false);
            }
        });
    }

    $('body').on('click', "#comments_add_form input[type='submit']", function (e) {
        e.preventDefault();
		$('.add_comment').prop('disabled', true);
		//...
    });

//ДОБАВИЛА





Ваш способ вроде как блокирует кнопку после отправки комментария
но есть проблемы он работает в том случае если человек
верно заполнил поля

имя
текст комментария
и каптчу

и нажал отправить комментарий, тогда все норм!

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

sergofedor06 22.09.2016 11:52

в итоге если человек ввел комментарий менее 30 знаков то ему не всплывает сообщение что нужно ввести более 30 знаков, и форма не работает так как кнопку переклинило и нужно перегружать страницу!

Manyasha 22.09.2016 11:58

sergofedor06,
а так?
$('body').on('click', "#comments_add_form input[type='submit']", function (e) {
        e.preventDefault();
        var user_name = $("#comments_add_form  #user_name");
        if (user_name.val().length >= 3) {
            var comment_text = $("#comments_add_form  #comment_text");
            if (comment_text.val().length >= 30) {
                var capcha = $("#comments_add_form #capcha");
                var anchor = $("#comments_add_form  #anchor").val();
                if (user_name.val() == "") {
                    alert("введите имя");
                } else if (comment_text.val() == "") {
                    alert("введите коментарий")
                } else {
					$('.add_comment').prop('disabled', true);
                    AjaxCapchaCheck('comments.func.php', capcha.val(), anchor, 'comments_add_form');    // указать путь до файла!
                }
            } else {
                alert("минимум 30 символов");
            }
        } else {
            alert("минимум 3 символа");
        }
    });

sergofedor06 22.09.2016 12:07

Manyasha

а где вы здесь добавили код, тут вроде только мой код!

sergofedor06 22.09.2016 12:11

нужно чтобы работала проверка полей, а уже если все верно, и нажал на добавить комент, то уже скрипт должен не допускать повторных кликов по кнопке, вот так будет хорошо.

sergofedor06 22.09.2016 12:17

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

но если я добавляю

ваш кусок кода в свой скрипт

//ДОБАВИЛА
				$('.add_comment').prop('disabled', false);
            },
            error: function (response) { //Если ошибка
                alert(response);
				
				$('.add_comment').prop('disabled', false);
            }
        });
    }

    $('body').on('click', "#comments_add_form input[type='submit']", function (e) {
        e.preventDefault();
		$('.add_comment').prop('disabled', true);
		//...
    });

//ДОБАВИЛА


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

Manyasha 22.09.2016 12:27

Цитата:

Сообщение от sergofedor06 (Сообщение 429446)
Manyasha

а где вы здесь добавили код, тут вроде только мой код!

строка 14

sergofedor06 22.09.2016 12:40

добавил

$('.add_comment').prop('disabled', true);

но все осталось как и было, проверка не работает всеровно кнопку блокирует

Manyasha 22.09.2016 13:10

sergofedor06,
попробуйте так:
function AjaxCapchaCheck(url, capcha, anchor, form_id) {
        var url = url;
        var capcha = capcha;
        var page_anchor = anchor;
        var form_id = form_id;
        jQuery.ajax({
            url: url, //Адрес подгружаемой страницы
	        async: false,//ДОБАВИЛА 
            type: "POST", //Тип запроса
            data: {capcha: capcha}
            success: function (response) { //Если все нормально
                if (response == '1') {
                    AjaxFormRequest(form_id, url, page_anchor);
                } else {
                    alert('ошибка защитного кода');
                    document.images.cryptogram.src='captcha/cryptographp.php?cfg=0&&'+Math.round(Math.random(0)*1000)+1;    // указать путь до файла!
                    return false;
                }
            },
            error: function (response) { //Если ошибка
                alert(response);
            }
        });
    }


Или так:
function AjaxCapchaCheck(url, capcha, anchor, form_id) {
        var url = url;
        var capcha = capcha;
        var page_anchor = anchor;
        var form_id = form_id;
        jQuery.ajax({
            url: url, //Адрес подгружаемой страницы
            type: "POST", //Тип запроса
            data: {capcha: capcha},
			beforeSend: function(xhrObj, settings) {
				$('.add_comment').prop('disabled', true);
			},
            success: function (response) { //Если все нормально
                if (response == '1') {
                    AjaxFormRequest(form_id, url, page_anchor);
                } else {
                    alert('ошибка защитного кода');
                    document.images.cryptogram.src='captcha/cryptographp.php?cfg=0&&'+Math.round(Math.random(0)*1000)+1;    // указать путь до файла!
                    return false;
                }
            },
            error: function (response) { //Если ошибка
                alert(response);
            },
			complete: function(xhrObj, textStatus) {
				$('.add_comment').prop('disabled', false);
			}
        });
    }

весь остальной Ваш код без изменений в обоих случаях.

sergofedor06 22.09.2016 16:20

Manyasha

большое вам спасибо! терь как нужно, подошел второй вариант!
пропускает публикацию сообщения только раз хоть и много раз кликаю по кнопке.


Вопрос к вам Manyasha что делает эта функция, вернее 2 функции что вы добавили во втором примере

1.
beforeSend: function(xhrObj, settings) {
$('.add_comment').prop('disabled', true);
},


2.
complete: function(xhrObj, textStatus) {
$('.add_comment').prop('disabled', false);
}



Спасибо еще раз!

sergofedor06 22.09.2016 16:32

на самом деле поэкспериментировал, все ровно при многократном нажатии идут дубли комментарием, просто их проскакывает меньше чем изначально, но не так что бы нажал кучу раз, а комментарий был один!

sergofedor06 22.09.2016 16:35

жаль что решения этой проблемы

sergofedor06 22.09.2016 16:47

ага вы похоже опечатались
у вас в примере было так

1.
beforeSend: function(xhrObj, settings) {
$('.add_comment').prop('disabled', true);
},


2.
complete: function(xhrObj, textStatus) {
$('.add_comment').prop('disabled', false);
}




а нужно так


1.
beforeSend: function(xhrObj, textStatus) {
$('.add_comment').prop('disabled', true);
},


2.
complete: function(xhrObj, textStatus) {
$('.add_comment').prop('disabled', false);
}





textStatus в обоих функциях тогда вроде работает верно!

sergofedor06 22.09.2016 16:58

проверил в разных браузерах, в сафари идут повторные пропуски, и иногда в гугл хроме тоже, но далеко не каждый раз, раньше постоянно было

sergofedor06 22.09.2016 20:18

Скажите какое действие выполняет объект xhrObj в данной функции?
beforeSend: function(xhrObj, textStatus)

как бы все работает так же и без него, т.е.

beforeSend: function(textStatus)


зачем нужен этот объект xhrObj

sergofedor06 23.09.2016 10:56

Ну как кто-то по вопросу сможет ответить?
спасибо!

Manyasha 23.09.2016 15:47

sergofedor06,
можно и не подавать эти аргументы, просто я оставила, как в справке:
http://api.jquery.com/jQuery.ajax/

Цитата:

все ровно при многократном нажатии идут дубли комментарием
попробуйте небольшую паузу добавить:
complete: function() {
				setTimeout(function(){
					$('.add_comment').prop('disabled', false);
				}, 1000);
			}

sergofedor06 24.09.2016 00:40

Manyasha

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


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