Как отправлять разные формы одним обработчиком?

Question

[Дан]

На странице 3 разные формы обратной связи, по одиночке работают, вместе же не хотят. Что не так?

Форма 1

<form class="main" name="form">
              <textarea id="title2" type="text" name="title" value="присоединиться" readonly>присоединиться</textarea>
              <label for="name2">
                <input id="name2" type="text" name="name" required>
                <p>Имя</p>
              </label>
              <label for="tel2">
                <input id="tel2" type="tel" name="tel" required>
                <p>Телефон</p>
              </label>
              <label for="email2">
                <input id="email2" type="email" name="email" required>
                <p>E-mail</p>
              </label>
              <label for="city2">
                <input id="city2" type="text" name="city" required>
                <p>Город</p>
              </label>
             <button id="submit2" class="main" type="submit" name="submit">Отправить</button>
            </form>

Форма 2

<form class="main" name="form">
          <input id="title" type="text" name="title" readonly>
          <label for="name">
            <input id="name" type="text" name="name" required>
            <p>Имя</p>
          </label>
          <label for="tel">
            <input id="tel" type="tel" name="tel" required>
            <p>Телефон</p>
          </label>
          <label for="email">
            <input id="email" type="email" name="email" required>
            <p>E-mail</p>
          </label>
          <label for="city">
            <input id="city" type="text" name="city" required>
            <p>Город</p>
          </label>
          <button id="submit" class="main" type="submit" name="submit">Отправить</button>
        </form>

script.js

// Обработчик
$(document).ready(function() {
	$('form').submit(function() {
		if (document.form.name.value == '' || document.form.tel.value == '' || document.form.email.value == '' || document.form.city.value == '' || document.form.title.value == '') {
			valid = false;
			return valid;
		}
		$.ajax({
			type: 'POST',
			url: 'mail.php',
			data: $(this).serialize()
		}).done(function() {
			// После успешной отправки:
      $('#form-block').modal('hide')
			$(this).find('input').val('');
      $('input').removeClass('defocus')
			$('form').trigger('reset');
      $('.sent').css('display', 'flex').hide().fadeIn();
		});
		return false;
	});
});

mail.php

<?php

$recepient = "***@gmail.com";

$title = trim($_POST["title"]);
$name = trim($_POST["name"]);
$tel = trim($_POST["tel"]);
$email = trim($_POST["email"]);
$city = trim($_POST["city"]);
$message = "$title \n\nИмя: $name \nТелефон: $tel \nEmail: $email \nГород: $city";

$headers  = "Content-type: text/plain; charset=utf-8 \r\n";
$headers .= "From: От кого <$email> \r\n";
mail($recepient, $title, $message, $headers);

?>

Answer 1

[Alexander Litvinenko]

Qleager, судя по коду, вам нужен e.target или this, что удобнее
а еще тут ума не приложу зачем нужен jQuery

Comments

[Alexander Litvinenko]

Qleager, ну, совет про то что это говнокод и не учить пхп уже явно давали, а по делу, у вас тут валидация на не пустое поле? для этого достаточно добавить атрибут require к валидируемому тегу прямо и ненужно никакого JS, тогда событие submit и вовсе не начнеться покан е заполнят все поля.

jQuery нет никакого смысла в данном коде даже если бутсреп, просто потому что вы пишите элементарные нативные вещи.

$('form') == document.querySelector('form')
.submit == .addEventListener('submit', ....
$.ajax.... == fetch....

и так далее, просто банально ни одной уникальной функции или даже которая работала бы просто лучше.

[Василий Варюхин]

Alexander Litvinenko, Да пусть бы использовал пока. Не будет лишних вопросов типа: А почему у меня в IE это не работает.

[Alexander Litvinenko]

Hocopor, на него уже давно все положили, сафари в основном сложности приносит, но jQuery тут не поможет

Answer 2

[Stalker_RED]

У вас несколько форм с одинаковым name? Тогда к которой из них относится эта проверка?

if (document.form.name.value == '' || document.form.tel.value == ''

...