Показать сообщение отдельно
  #1 (permalink)  
Старый 25.10.2016, 18:49
Профессор
Отправить личное сообщение для smart-create Посмотреть профиль Найти все сообщения от smart-create
 
Регистрация: 25.10.2016
Сообщений: 157

Один скрипт для всех форм на странице
Доброго времени суток! Прошу профессиональной помощи у всех сведущих в js людей. Я только недавно стал изучать js программирование и недавно столкнулся с весьма неприятной задачей. Неделя активного гуглежа и раздумий не к чему меня не привели, по этому искренне надеюсь найти помощь здесь.

Дело вот в чем, у меня есть контактная форма на сайте, для нее я написал скрипт валидации и отправки через ajax, вот собственно разметка формы и сам скрипт:
<form method="post" action="main_c/order" id="contact-form">
	<input type="text" name="name" placeholder="Имя *" />
	<input type="text" name="phone" placeholder="Телефона *" />
	<button type="submit" name="btn_order_1" id="btn_1">Жду звонка!</button>
</form>
<div id="thank-you" class="display">
	<p>Спасибо за заявку! <small>Наш дежурный инженер свяжется с Вами в ближайшее время</small></p>
</div>

<script>
$(function(){
	var contact_form = $("#contact-form");
	var input = $("#contact-form input");
	var name = $("#contact-form input[name='name']");
	var phone = $("#contact-form input[name='phone']");
		
	contact_form.find("[name=btn_order_1]").click(function(event){
		event.preventDefault();
		event.stopPropagation();
		if(name.val() == "", phone.val() == ""){
		//error
			console.log('false');
			input.addClass('input-error');
			return false;
		}else{
		//true
			console.log('true');
			input.removeClass('input-error');
			input.addClass('input-success');
			contact_form.ajaxSubmit({
				url: contact_form.attr('action'),
				type: contact_form.attr('method') || 'POST',
				data: {
					btn_order_1: 1,
				},
				dataType: 'json',
				success: function(data) {
					contact_form.find('[type=reset]').click();
				},
			});
			setTimeout(function(){
				$('#thank-you').fadeIn(300);
				$('#contact-form').fadeOut(300);
			},300);
		}
		return false;
	});
});
</script>

И все бы хорошо, все работает так как я и хочу, НО как быть если форм у меня несколько, скажем штук 20. Выходит что мне нужно этот скрипт копировать 20 раз и проставлять в нем и в самих формах новые уникальные id - это как то жутко неудобно а самое главное не правильно.
Подскажите пожалуйста что именно мне нужно изменить/дописать в алгоритм этого скрипта что бы он работал как и работает но сразу для всех форм на сайте (само собой имеется в виду только активная форма, с которой в данный момент контактирует пользователь).
Ответить с цитированием