Как устранить повторную отправку формы?

Question

[Александр Машталир]

Здравствуйте! При нажатии на кнопку сабмит формы происходит 2 раза!

На сайте есть форма:

<form class="form rf" method="POST" action="js/send.php">
			<input name="name" type="text" class="rfield" placeholder="Ваше имя">
			<input name="phone" type="text" class="rfield" placeholder="Ваш телефон">
			<input name="title" type="text" class="none" value="Заявка: консультация">
			<input type="submit" name="button" class="btn btn_submit disabled" value="Перезвонить мне">
</form>

Есть валидация

И есть обработчик:

<?
$to= "[e-mail]";

$subject = "New leed";

$headers= "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/html; charset=UTF-8\r\n";

if(isset($_POST['title'])) {$title=$_POST['title'];}
if(isset($_POST['name'])) {$name=$_POST['name'];}
if(isset ($_POST['phone'])) {$phone=$_POST['phone'];}
if(isset ($_POST['email'])) {$email=$_POST['email'];}
if(isset ($_POST['people'])) {$people=$_POST['people'];}

mail ($to, $subject, "$title<br>$name<br>$phone<br>$email<br>$people",$headers)
?>

Также пользуюсь плагином jQuery Form Plugin для вывода сообщений типа:

$('form').ajaxForm(function() { 
	    alert("Спасибо! Заявка принята. С Вами свяжутся в ближайшее время!");
	});

Сабмит срабатывает 2 раза, и пользователю выскакивает сообщение "Спасибо" тоже 2 раза.
Никак не могу решить эту проблему...

Answer 1

[Виталий Киренков]

Давайте я лучше вам предложу использовать 1 плагин - jqueryvalidation.org/files/demo

Он делает проверку "на лету", отсылку аяксом форму, и есть колбэк для вывода ответа.

Answer 2

[Дмитрий Шишкин]

Сталкивался с такой проблемой.
Решилось запретом двойного нажатия на сабмит вот так:

$.ajax({
               type: 'POST',
               url: addressForAjax,
               data: data,
                 beforeSend: function(data) {
                      form.find('input[type="submit"]').attr('disabled', 'disabled');
                      $('.form_box_preloader').fadeIn(200);
                    },
                 complete: function(data) {
                      form.find('input[type="submit"]').prop('disabled', false);
                      $('.form_box_preloader').fadeOut(200);
                   }
                            
                 });

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

Comments

[locus]

А если обновлять капчу после каждого нажатия кнопки? Как это реализовать?