Как правильно организовать работу с множеством форм на лендинге?
 

Подскажите, пожалуйста, как организовать работу с несколькими (5-10) формами на лендинге? Не как определить, какая именно форма отправляется и т.д., а замешать все в одну функцию, делить функции по типам форм или писать отдельный обработчик для каждой формы?

Вообще, я делаю разные обработчики для разного типа форм. То есть, для формы с полями "Имя" и "Телефон" - свой обработчик, для формы, где "Имя", "Адрес", "Время доставки" - свой.

Сомневаюсь в правильности этого... Очень хочется иметь некую универсальную функцию, в которую только передавать id формы, ну может еще какие параметры или это утопия?

То, что я пишу сейчас для отправки формы, выглядит так:

function send_order_ring() {
	var name = $('#name').val();
	var tel = $('#tel').val();
	
	if(name != false && tel != false) {
		$.ajax(
		{
		 type: "POST",
		 url: "templates/script/send-order.php",
		 data: {'mode': 'order_ring', 'name': name, 'tel': tel},
		 beforeSend: function() {$('#loader').show();},
		 success: function(html)
			{
				$('#loader').hide();
				alert('Сообщение об успешной отправке');
			},
		 error: function()
		 {
			 alert('Что-то пошло не так. Пожалуйста, попробуйте отправить еще раз!');
		 }
		});
	}
}

Подозреваю, что это дикая, устаревшая фигня... Особенно когда на странице 5 разных форм. Тогда получается 5 таких функций, а в php я все это разруливаю по переменной mode - в данном случае, если она == 'order_ring', значит, это заказ звонка.

Направьте, пожалуйста, на путь истинный, если я не на нем. :-?

Можно сделать так:

<form class="async">
    <input type="phone" data-type="phone" require/>
    <input type="email" data-type="email" require/>
</form>
<script>
	$('form.async').submit(function(e){
		e.preventDefault();
		var $form=$(this);
		
		if($form.find('[require]').toArray().some(function(node){
			return !node.value.trim().lenght;
		}))
		   alert('Заполните все обязательные поля');
		   
		if($form.find('[data-type]').each(function(){
			/* 
				Тут осуществляется проверка корректности 
				заполнения поля в зависимости от аттрибута data-type.
				В переменную "valid" записывается результат проверки
			*/
			
			this.classList[valid?'remove':'add']('invalid');
		}).filter('.invalid').length)
			return alert('Одно из полей заполненно некорректно');
			
		/* 
			тут еще 0 или больше проверок чего-либо 
			и отправка запроса
		*/
	});
</script>

Тут получается универсальная проверка заполненности обязательных полей. А для отправки все равно придется делать раздельный сбор данных из полей, ведь их количество и назначение может быть разным? И как потом на сервере понять, какие поля к какой форме относятся? Думаю, что мой mode не лучшее решение )

Зачем в форму включать те поля, которые нафиг не нужны?
У вас все формы на 1 файл отправляются?
Если да, то можно отправлять какое-нибудь поле, которое говорило бы о принадлежности данных к конкретной форме.

Не совсем понял... Вот, например, на лендинге есть 5 форм:

- Заказ звонка (Поля: имя, телефон)
- Заказ замера (Поля: имя, телефон, адрес, время)
- Заказ доставки (Поля: имя, город, улица, дом, квартира)
- Заказ звонка (Еще раз, но по-другому) (Поля: имя, телефон, время для звонка)
- Ваш вопрос (Поля: имя, email, тест вопроса)

Сейчас я для отправки таких форм пишу 5 отдельных функций, для сбора, валидации и передачи на сервер. Но, возможно, это надо делать короче и проще, в рамках одной функции.

Первое, что приходит в голову:
- Получить id отправляемой формы
- Найти обязательные поля и проверить их заполненность
- Получить данные из этих полей
- Отправить данные на сервер

То есть, получается некая обезличенная функция, которая вроде бы делает то, что нужно. Но:

- Как на сервере понять: заказ звонка это или заказ доставки?
- Как определить какое поле к чему относится, если даже не понятно, из какой формы это все пришло?

Например, если собрать данные через jquery.serialize - кажется, что очень удобно, но как потом дальше определять, что есть что? Или писать развязки в стиле switch-case на сервере?

Возможно, я вообще неверно мыслю :)

<form class="async">
    <input type="hidden" name="type" value="a"/>
    <input type="phone" data-type="phone" require/>
    <input type="email" data-type="email" require/>
</form>
<form class="async">
    <input type="hidden" name="type" value="b"/>
    <input type="phone" data-type="phone" require/>
    <input type="email" data-type="email" require/>
</form>
<form class="async">
    <input type="hidden" name="type" value="c"/>
    <input type="phone" data-type="phone" require/>
    <input type="email" data-type="email" require/>
</form>

<?php
	if(!isset($_POST['type']))
		exit('Bad request');
	
	$allowed_types=array('a','b','c');
	$type=preg_replace('#[^a-z]+?#uim',null,$_POST['type']);
	if(!in_array($type,$allowed_types))
		exit('Bad request');
		
	/*
		Какая форма получена - понятно, дальше нужно вызвать обработчик формы.
	*/

Да, это интересное решение со стороны сервера.

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

Спасибо!

Зачем?

sergey-site,
неоправданно иметь массу отдельных обработчик, для полей имеющих одно и тоже назначение.

Согласен. А можно поподробней, что Вы имеете в виду? Несколько обработчиков для одинаковых форм?