@patriot94
Веб разработчик

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

Здравствуйте! При нажатии на кнопку сабмит формы происходит 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= "example@ukr.net";

$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 для вывода сообщений типа:
ddcd64cd99b24fb2a7fefdcf4d4c46ba.jpg
$('form').ajaxForm(function() { 
	    alert("Спасибо! Заявка принята. С Вами свяжутся в ближайшее время!");
	});


Сабмит срабатывает 2 раза, и пользователю выскакивает сообщение "Спасибо" тоже 2 раза.
Никак не могу решить эту проблему...
  • Вопрос задан
  • 4285 просмотров
Пригласить эксперта
Ответы на вопрос 2
DeLaVega
@DeLaVega
Верстаю, фронтэндю =)
Давайте я лучше вам предложу использовать 1 плагин - jqueryvalidation.org/files/demo

Он делает проверку "на лету", отсылку аяксом форму, и есть колбэк для вывода ответа.
Ответ написан
Комментировать
aerohorn
@aerohorn
Учусь фронтендить
Сталкивался с такой проблемой.
Решилось запретом двойного нажатия на сабмит вот так:
$.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);
                   }
                            
                 });


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы