Как отправить запрос с конкретной формы и передать ID или Class формы в PHP-скрипт через ajax-запрос?

Question

[ymfront]

Есть 2 одинаковые формы:

Первая с id="form1" и классом "js-form1":

<form id="form1" class="contact_form js-form1" action="#">
	<h4 class="form_title">Контакты</h4>
	<div class="fields_wrapper">
		<input class="field name" name="name" type="text" placeholder="Фамилия Имя" required>
		<input class="field email" name="email" type="email" placeholder="Email" required>
		<input class="field phone" name="phone" type="tel" placeholder="Телефон" required>
		<textarea class="field message" name="message" placeholder="Суть вопроса" required></textarea>
	</div>
	<button class="button">Отправить</button>
</form>

Вторая с id="form2" и классом "js-form2":

<form id="form2" class="contact_form js-form2" action="#">
	<h4 class="form_title">Контакты</h4>
	<div class="fields_wrapper">
		<input class="field name" name="name" type="text" placeholder="Фамилия Имя" required>
		<input class="field email" name="email" type="email" placeholder="Email" required>
		<input class="field phone" name="phone" type="tel" placeholder="Телефон" required>
		<textarea class="field message" name="message" placeholder="Суть вопроса" required></textarea>
	</div>
	<button class="button">Отправить</button>
</form>

Также есть js-функция отправки формы:

function sendForm(form) {

    var data = {
        name: $(form).find("input[name='name']").val(),
        phone: $(form).find("input[name='phone']").val(),
        question: $(form).find("textarea[name='question']").val(),
        button: $(form).find("input[name='button']").val(),
    }

    $.ajax({
        type: "POST",
        url: "php/send.php",
        data: data,
        success: function() {
            alert("Отправлено!");
        }
    });

}

Как нужно вызывать js-функцию, чтобы она брала данные с той формы которую отправили? И как передать через ajax или ID, или Class формы? В зависимости от формы нужно в PHP-скрипте менять тему письма.

Comments

[ksnk]

button: $(form).find("input[name='button']").val(),

вот вместо вот этого поставь

button: $(form).find("input[name='button']").data('formid'),

и в разметке

<button class="button" data-formid="form1">Отправить</button>

Ну и различай формы в php по этому параметру. А то тебя сейчас научать жить без jquery :)

Answer 1

[Михаил Р.]

Как нужно вызывать js-функцию, чтобы она брала данные с той формы которую отправили? И как передать через ajax или ID, или Class формы?

Модифицировать кнопку форм, чтобы она вызывала событие формы submit:

<button type="submit" class="button">Отправить</button>

Создадим один обработчик для всех форм:

async function sendForm(form) {
  const data = {
    name: form.querySelector("input[name='name']").value,
    email: form.querySelector("input[name='email']").value,
    phone: form.querySelector("input[name='phone']").value,
    message: form.querySelector("textarea[name='message']").value,
    formId: form.id,
    formClass: form.className
  }

  try {
    const response = await fetch('php/send.php', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(data)
    });

    if(response.ok) {console.log('Success send form')}
    else console.log('Error send form', response);
  }

  catch(error) {console.log('Error: ' + error.message)}
}

Вешаем слушателей на submit форм:

document.querySelector('#form1').addEventListener('submit', (e) => {
  e.preventDefault();
  sendForm(event.target);
});

document.querySelector('#form2').addEventListener('submit', (e) => {
  e.preventDefault();
  sendForm(event.target);
});

В зависимости от формы нужно в PHP-скрипте менять тему письма.

В php обработчике формы обрабатываем полученные данные от js (php у меня не очень):

$json = file_get_contents("php://input");
$data = json_decode($jsonData, true);

// get formId and formClass
$id = $data['formId'];
$class = $data['formClass'];

// this change type email message

Comments

[ymfront]

Как то сложно все у вас :-) Можно как-то на моем примере вызвать функцию sendForm() ?
И у вас я так понял, данные в php-скрипт передаются в JSON. меня просто передавались по отдельности. И в PHP я их получал так: $name = $_POST['name']

[Михаил Р.]

ymfront,

Можно как-то на моем примере вызвать функцию sendForm() ?

Код написал с учетом Вашего примера, выброшена клинопись, jquery и все остальные наскальные рисунки.

И у вас я так понял, данные в php-скрипт передаются в JSON

Да, как это принято делать.

И в PHP я их получал так: $name = $_POST['name']

У меня примерно так же, только "посовременнее".

[ymfront]

Понял, спасибо, постараюсь разобраться

[Михаил Р.]

ymfront, просто замените свои участки кода на мои - все заработает. Если не заработает, то в консоли браузера (после отправки формы) у Вас появится информация о том, где именно возникла ошибка.

спасибо

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