Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.12.2017, 12:23
Новичок на форуме
Отправить личное сообщение для sergey-site Посмотреть профиль Найти все сообщения от sergey-site
 
Регистрация: 20.12.2017
Сообщений: 8

Как правильно организовать работу с множеством форм на лендинге?
Подскажите, пожалуйста, как организовать работу с несколькими (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', значит, это заказ звонка.

Направьте, пожалуйста, на путь истинный, если я не на нем.
Ответить с цитированием
  #2 (permalink)  
Старый 20.12.2017, 12:33
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,795

Можно сделать так:
<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>
Ответить с цитированием
  #3 (permalink)  
Старый 20.12.2017, 12:40
Новичок на форуме
Отправить личное сообщение для sergey-site Посмотреть профиль Найти все сообщения от sergey-site
 
Регистрация: 20.12.2017
Сообщений: 8

Тут получается универсальная проверка заполненности обязательных полей. А для отправки все равно придется делать раздельный сбор данных из полей, ведь их количество и назначение может быть разным? И как потом на сервере понять, какие поля к какой форме относятся? Думаю, что мой mode не лучшее решение )
Ответить с цитированием
  #4 (permalink)  
Старый 20.12.2017, 12:46
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,795

Сообщение от sergey-site
А для отправки все равно придется делать раздельный сбор данных из полей, ведь их количество и назначение может быть разным?
Зачем в форму включать те поля, которые нафиг не нужны?
Сообщение от sergey-site
И как потом на сервере понять, какие поля к какой форме относятся?
У вас все формы на 1 файл отправляются?
Если да, то можно отправлять какое-нибудь поле, которое говорило бы о принадлежности данных к конкретной форме.
Ответить с цитированием
  #5 (permalink)  
Старый 20.12.2017, 12:55
Новичок на форуме
Отправить личное сообщение для sergey-site Посмотреть профиль Найти все сообщения от sergey-site
 
Регистрация: 20.12.2017
Сообщений: 8

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

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

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

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

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

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

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

Возможно, я вообще неверно мыслю
Ответить с цитированием
  #6 (permalink)  
Старый 20.12.2017, 13:03
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,795

<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');
		
	/*
		Какая форма получена - понятно, дальше нужно вызвать обработчик формы.
	*/
Ответить с цитированием
  #7 (permalink)  
Старый 20.12.2017, 13:15
Новичок на форуме
Отправить личное сообщение для sergey-site Посмотреть профиль Найти все сообщения от sergey-site
 
Регистрация: 20.12.2017
Сообщений: 8

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

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

Спасибо!
Ответить с цитированием
  #8 (permalink)  
Старый 20.12.2017, 13:29
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Сообщение от Nexus
$type=preg_replace('#[^a-z]+?#uim',null,$_POST['type']);
Зачем?
Ответить с цитированием
  #9 (permalink)  
Старый 20.12.2017, 13:31
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

sergey-site,
неоправданно иметь массу отдельных обработчик, для полей имеющих одно и тоже назначение.
Ответить с цитированием
  #10 (permalink)  
Старый 20.12.2017, 13:34
Новичок на форуме
Отправить личное сообщение для sergey-site Посмотреть профиль Найти все сообщения от sergey-site
 
Регистрация: 20.12.2017
Сообщений: 8

Сообщение от laimas Посмотреть сообщение
sergey-site,
неоправданно иметь массу отдельных обработчик, для полей имеющих одно и тоже назначение.
Согласен. А можно поподробней, что Вы имеете в виду? Несколько обработчиков для одинаковых форм?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно настроить очерёдность выполнения функций? Altai Общие вопросы Javascript 8 01.02.2017 19:32
Как правильно организовать togle imedia Элементы интерфейса 1 23.01.2017 09:29
Пасоны, как правильно парсить параметры? megaupload Оффтопик 15 05.05.2013 14:44
Как правильно прицепить обработку события slowklg Events/DOM/Window 6 15.03.2012 16:20
Как правильно послать XML в POST запросе LowCoder AJAX и COMET 10 15.07.2009 23:20