Блокирование кнопки на 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">

sergofedor06, AJAX покажи

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

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;
     };
 };

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

Спасибо!

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


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

sergofedor06,
по классу

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

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

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

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

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;
};
};




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

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

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

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

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

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

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

$(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,

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

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

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

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

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);
		//...
    });

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

рони


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



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


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

[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);
		//...
    });

//ДОБАВИЛА

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

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

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

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

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

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 символа");
        }
    });

Manyasha

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

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

у меня изначально в скрипте идет проверка всех полей на длинну и наличия ссылки в них, если человек ввел короткий комент и нажал добавить его то всплывает подсказка минимум 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);
		//...
    });

//ДОБАВИЛА

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

строка 14

добавил

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

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

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);
			}
        });
    }

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

Manyasha

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


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

1.

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

2.

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

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

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

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

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

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 в обоих функциях тогда вроде работает верно!

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

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

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

beforeSend: function(textStatus)


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

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

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

попробуйте небольшую паузу добавить:

complete: function() {
				setTimeout(function(){
					$('.add_comment').prop('disabled', false);
				}, 1000);
			}

Manyasha

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