Отправка данных из нескольких форм с помощью одного ajax-обработчика. Как?

Question

[raffy72]

На странице есть несколько одинаковых форм с разным id и с одинаковым классом:

<form action="" id="form-1" class="form-action-1">
<input type="text" name="name" placeholder="Имя">
<input type="text" name="phone" placeholder="Телефон или Email">
<button type="submit" name="submit">Отправить</button>
</form>

Также есть обработчик формы с помощью ajax:

$(document).on('submit', '.form-action-1', function(e)
{
	e.preventDefault();
	
	var error = false,
		$form = $('.form-action-1'),
		$name = $('input[name="name"]'),
		$phone = $('input[name="phone"]');
	
	if ($('input[name="name"]').val() == '')
	{
		$name.addClass('input-error');
		setTimeout(function(){
			$name.removeClass('input-error');
		}, 600);
		error = true;
    }
	
	if ($('input[name="phone"]').val() == '')
	{
		$phone.addClass('input-error');
		setTimeout(function(){
			$phone.removeClass('input-error');
		}, 600);
		error = true;
	}
	
	if (!error)
    {
		$form.find('.input-error').removeClass('input-error');
		
		$.ajax({
			type: 'POST',
			url: 'mail.php',
			data: $form.serialize(),
			
			success: function() {
				$('#form-banner-dialog').removeClass('dialog-close');
				$('#form-banner-dialog').addClass('dialog-open');
				$('.close').on('click', function() {
					$('#form-banner-dialog').removeClass('dialog-open');
					$('#form-banner-dialog').addClass('dialog-close');
				});
				$form.find('input[type=text]').val('');
			}
			});
	}
	return false;
});

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

Подскажите, пжл, в какую сторону копать?

Comments

[Андрей]

Код неверно написан, вот и не работает...

Answer 1

[Алексей]

Если формы действительно одинаковые, то конструкции $('.form-action-1'), $('input[name="name"]') выбирают несколько форм и полей, то есть вероятно не то что вы ожидаете.
Попробуйте $name = $('input[name="name"]') заменить на $name = $('input[name="name"]', $(this)) или $name = $('input[name="name"]', form) во всех местах.

Comments

[raffy72]

В общем, сделал немного по-другому:

$form = $(this),
$name = $form.find('input[name="name"]').val(),
$phone = $form.find('input[name="phone"]').val();

Отправляет уже нормально, но вот в этом месте код не срабатывает:

if ($form.find('input[name="name"]').val() == '')
{
$name.addClass('input-error');
setTimeout(function(){
$name.removeClass('input-error');
}, 600);
error = true;
}

То есть, на почту приходит так, как надо, но при сабмите пустого поля, к нему не добавляется класс.

[raffy72]

Но и форма с пустым полем не отправляется, значит error = true работает.

[raffy72]

В консоли выводит: $name.addClass is not a function

[Алексей]

После $name = $form.find('input[name="name"]').val() переменная $name содержит строку, то есть последующая конструкция $name.addClass('input-error') неверна. Замените на $form.find('input[name="name"]').addClass('input-error') или как-то иначе сделайте.

[raffy72]

Я так уже пробовал, и класс добавляется к инпутам только первой формы. Понимаю, что где-то тут собака зарыта, буду искать. Спасибо, что помогаете разобраться.

[Алексей]

Странно, вроде бы должно работать, сверьте код с https://jsfiddle.net/8LL55s1b/

[raffy72]

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

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

$(document).on('submit', '.form-action-1', function(e)
{
e.preventDefault();

var error = false,
$form = $(this),
$name = $form.find('input[name="name"]'),
$phone = $form.find('input[name="phone"]');

if ($name.val() == '')
{
$name.addClass('input-error');
setTimeout(function(){
$name.removeClass('input-error');
}, 600);
error = true;
}

if ($phone.val() == '')
{
$phone.addClass('input-error');
setTimeout(function(){
$phone.removeClass('input-error');
}, 600);
error = true;
}

if (!error)
{
$form.find('.input-error').removeClass('input-error');

$.ajax({
type: 'POST',
url: 'mail.php',
data: $form.serialize(),

success: function() {
alert('Success');
$form.find('input[type=text]').val('');
}
});
}
return false;
});

Answer 2

[Андрей]

Предыдущий ответ годный, я бы еще вот так сделал $form = $(this); вместо $form = $('.form-action-1'), ибо автор явно не понимает что команда делает вовсе не то, что он хочет на самом деле...