@raffy72

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

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

Подскажите, пжл, в какую сторону копать?
  • Вопрос задан
  • 2615 просмотров
Решения вопроса 1
alsopub
@alsopub
Если формы действительно одинаковые, то конструкции $('.form-action-1'), $('input[name="name"]') выбирают несколько форм и полей, то есть вероятно не то что вы ожидаете.
Попробуйте $name = $('input[name="name"]') заменить на $name = $('input[name="name"]', $(this)) или $name = $('input[name="name"]', form) во всех местах.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
iCoderXXI
@iCoderXXI
React.JS/FrontEnd engineer
Предыдущий ответ годный, я бы еще вот так сделал $form = $(this); вместо $form = $('.form-action-1'), ибо автор явно не понимает что команда делает вовсе не то, что он хочет на самом деле...
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы