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

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

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

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

А вот на поподробней, что Вы имеете в виду? нужно знать для чего эти данные получаются - запись в базу, просто отправка письма к примеру, или нечто иное.

На сервере можно иметь описание полей любого набора, то есть любой формы. Описание это массив, ключи которого одной стандартной РНР функций помогут узнать прислали ли потребное или же это левый мусор. Под ключами описаны поля формы (набора), которые есть указатели на правила проверки этих полей. Функция проверяющая данные возвращает результат сценарию, который определяет действия по назначению данных.

Просто отправка письма.

И формы отличаются только одним полем в них?

чтоб спать крепче)

И без этого можно спать спокойно. Достаточно проверить наличие ключей ожидаемых, совпадение или нет и даст ответ, а что там, хоть граната, это уже не важно. :)

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

Значит "назначение как отправка почтой" либо неудачная задача для примера, либо чего-то не так. Сами подумайте - зачем иметь кучу различных обработчиков и вообще зачем серверу знать какая форма пришла, если данные ни с чем на сервере не связаны, например с БД, а просто отправляются почтой? Поместите в формы скрытое поле с текстами "Запрос ...", которое при формировании отправления помещайте в тему письма. Все, больше ничего не надо, остальные поля формы в тело письма, и все это одним обработчиком.

А это интересно! :) Да, именно для формирования темы мне и надо знать какая форма пришла. Так действительно можно сделать универсальную функцию. Спасибо!