Вопрос или проблема
Мне нужно, чтобы пользователь отправлял 2 формы нажатием одной кнопки, поэтому я пытаюсь объединить две кнопки в одну третью, чтобы передать данные, но не знаю, что делаю не так.
Я пытался заставить это решение сработать, но получаю ошибку в консоли:
“uncaught typeerror: cannot read property ‘submit’ of null at
SubmitForms”
Одна из форм создается с помощью ninjaforms, другая – другим плагином… Я не уверен, могу ли я правильно указать/вызвать id ninjaform или его имя. Где можно найти одно из этих значений? Я пробовал много различных вариантов, все с тем же результатом.
Итак, моя (третья) кнопка подключена так:
...
function button() {
echo '<input type="button" name=button class=button value="нажми меня" onclick="submitForms()" />';
}
А вот как выглядит js (в хедере):
<script>
submitForms = function(){
document.getElementById("ninja_form_id_2").submit();
document.getElementById("id_form_2").submit();
}
</script>
Я никогда раньше не использовал javascript, так что не уверен, правильно ли я его внедрил.
Спасибо за помощь!
Я частично украл этот ответ с SO
$("#idForm").submit(function(e) {
var url = "path/to/your/script.php"; // скрипт, в котором вы обрабатываете ввод формы.
$.ajax({
type: "POST",
url: url,
data: {
form1: $("#idForm").serialize(),
form2: $("#idForm2").serialize()
},
// сериализует элементы формы.
success: function(data)
{
alert(data); // показать ответ от php скрипта.
}
});
e.preventDefault(); // избегайте выполнения фактической отправки формы.
});
Итак, в основном вы предотвращаете обычную отправку ваших форм, сериализуете их содержимое в json и отправляете это в ajax-запрос на сервер.
Ответ или решение
Для того чтобы отправить две формы с одной кнопки, вы можете воспользоваться AJAX-запросом, который обеспечит обработку данных обеих форм на сервере. Рассмотрим поэтапно, как это можно реализовать.
Шаг 1: Подготовьте ваши формы
Убедитесь, что ваши формы имеют уникальные идентификаторы. Например:
<form id="ninja_form_id_2">
<!-- Поля формы Ninja Forms -->
</form>
<form id="id_form_2">
<!-- Поля второй формы -->
</form>
<input type="button" name="button" class="button" value="Click Me" onclick="submitForms()" />Шаг 2: Напишите JavaScript для отправки обеих форм
Вам нужно написать функцию, которая будет сериализовать данные этих форм и отправлять их с помощью AJAX:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function submitForms() {
var formData1 = $("#ninja_form_id_2").serialize(); // Сериализуем первую форму
var formData2 = $("#id_form_2").serialize(); // Сериализуем вторую форму
$.ajax({
type: "POST",
url: "path/to/your/script.php", // Путь к вашему серверному скрипту
data: {
form1: formData1,
form2: formData2
},
success: function(response) {
alert(response); // Здесь вы можете обработать ответ от сервера
},
error: function(jqXHR, textStatus, errorThrown) {
console.error("Ошибка: " + textStatus + " " + errorThrown);
}
});
}
</script>Шаг 3: Обработка данных на сервере
На сервере вам нужно создать обработчик, который обработает данные обеих форм. Вот пример на PHP:
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// Обработка данных первой формы
parse_str($_POST['form1'], $form1_data);
// Обработка данных второй формы
parse_str($_POST['form2'], $form2_data);
// Здесь вы можете сохранить данные в базе данных или выполнить другую логику
// Возврат ответа
echo "Формы успешно отправлены!";
}
?>Заключение
Теперь, когда вы нажимаете кнопку "Click Me", обе формы будут отправлены на сервер одновременно, а их данные будут обработаны. Убедитесь, что идентификаторы форм и путь к серверному скрипту корректны. Также обратите внимание на ошибку "uncaught TypeError", которая могла возникать из-за неправильных идентификаторов форм. Если у вас возникнут дополнительные вопросы или потребуется помощь, не стесняйтесь обращаться!