Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   Ошибка обработки ajax отпpавки фoрмы (https://javascript.ru/forum/project/62737-oshibka-obrabotki-ajax-otppavki-formy.html)

gotop 26.04.2016 14:57

Ошибка обработки ajax отпpавки фoрмы
 
Привет, aлгoритм слeдующий: зaпoлняeтся фoрма, eё oтпрaвку пeрeхвaтывaeт jQuerи скрипт, прoвeряет и oтпрaвляeт бeз пeрeзaгрузки стрaницы в oбрaбoтчик.
Проблема следующая: после заполнения первой формы скрипт обрабатывает запрос и все ок, а после заполнения второй формы даже не заходит в скрипт и обновляет страницу.
<form role="form" action="" id="ajaxform" method="post" novalidate="novalidate">
                    <h3>Форма 1</h3>
                    <span class="form-title"></span>
                    <div class="user">
                      <input type="text" id="name" name="name" id='placeName' placeholder="Ваше имя">
                      <i class="fa fa-user"></i>
                    </div>
                    <div class="phone-form">
                      <input type="tel" id="number" name="phone" id='placePhone' " class="user_phone" placeholder="(___) ___ __ __" >
                      <i class="fa fa-phone-square"></i>
                    </div>
                    <div class="submit">
                        <input type="submit" class="btn-1" value="Заказать сейчас">
                    </div>
                </form>
				
<form role="form" action="" id="ajaxform" method="post" novalidate="novalidate">
                      <h3>Форма 2</h3>
                      <span class="form-title"></span>
                      <div class="user">
                        <input type="text" id="name1" name="name" placeholder="Ваше имя">
                        <i class="fa fa-user"></i>
                      </div>
                      <div class="phone-form">
						<input type="tel" id="number1" name="phone" id='placePhone' " class="user_phone" placeholder="(___) ___ __ __" >
                        <i class="fa fa-phone-square"></i>
                      </div>
                      <div class="submit">
                          <input type="submit" class="btn-1" value="Заказать сейчас">
                      </div>
                    </form>

<script type="text/javascript">
		$(document).ready(function() { 
		jQuery(function($){
			$("#number").mask("(999) 999-9999");
			$("#number1").mask("(999) 999-9999");
			$("#number2").mask("(999) 999-9999");  
        });
		$("#ajaxform").submit(function(){ 
			var form = $(this); 
				var data = form.serialize(); 
				$.ajax({ 
				   type: 'POST', 
				   url: 'mail.php', 
				   dataType: 'json', 
				   data: data, 
				   beforeSend: function(data) { 
						form.find('input[type="submit"]').attr('disabled', 'disabled'); 
					  },
				   success: function(data){ 
						if (data['error']) { 
							alert(data['error']); 
						} else { 
							PopUpHide('#popup-order');
							PopUpShow('#popup-thanks');
							$(form).trigger('reset');
						}
					 },
				   error: function (xhr, ajaxOptions, thrownError) { 
						alert(xhr.status); 
						alert(thrownError); 
					 },
				   complete: function(data) { 
						form.find('input[type="submit"]').prop('disabled', false); 
					 }
							  
					 });
			
			return false; 
		});
		});
		</script>

laimas 26.04.2016 15:50

Цитата:

Сообщение от gotop
после заполнения первой формы скрипт обрабатывает запрос и все ок, а после заполнения второй формы

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

Если второе, то не может быть на странице куча форм с id="ajaxform", иначе JS и будет работать только с первой найденной из них.
Если первое, то либо делегирование обработки, либо установка обработчика динамическая.

gotop 26.04.2016 18:22

Второе. У меня всего три формы, функционал которых надо обрабатывать одинаково, какой есть вариант кроме дублирования кода?

laimas 26.04.2016 19:01

Цитата:

Сообщение от gotop
Второе. У меня всего три формы


Если все три формы на странице, то у них должен быть либо уникальный идентификатор, на которые устанавливаются обработчики, либо все три формы имеют одно имя класса, на который и ставится обработчик. Либо если кроме этих форм на странице более нет форм, то селектором может случить и просто имя тега.

Вот только интересно - зачем же иметь три одинаковых по содержанию формы да еще при использовании Ajax?

laimas 27.04.2016 05:33

Цитата:

Сообщение от Rise
Лендинг пейдж, формы захвата, маркетинг... такие дела

Это не повод держать три одинаковых формы, которые равны друг другу на все 100. Посмотрите на код форм.


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