Как найти ошибку в форме обратной связи?

Question

[Андрей Филимонов]

Здравствуйте, на сайте есть рабочий образец формы обратной связи:

<a href="#win1" class="box-button2" >Запись</a> 

<a href="#x" class="overlay_det" id="win1"></a> 
<div class="popup_det"> 
<form method="post" action="javascript:void(0);" onsubmit="send_form_gruppa();" id="forma-gruppa"> 
<input id="na-glav" name="fio" placeholder="Ф.И.О" /> 
<input id="na-glav" type="text" name="phone" placeholder="Телефон" /> 
<input id="na-glav" type="text" name="age" placeholder="Возраст девочки" /> 
	<!--Взял от сюда https://html5book.ru/sozdanie-html-form/-->
	 <select name="zal" type="text">
        <option name="zal" type="text">Адрес зала</option>
		 <option value="Шоссе в Лаврики 22а">Шоссе в Лаврики 22а, м.Девяткино</option> 
		 <option value="Непокорённых 74">Непокорённых 74, м.Академическая</option> 
		 <option value="Белградская 28к2">Белградская 28к2, м.Международная</option> 
		 <option value="Турку 24к2">Турку 24к2, м.Международная</option> 
        <option value="Рижский 8">Рижский 8, м.Балтийская</option> 
        <option value="Лесной 59к7">Лесной 59к7, м.Лесная</option>
		  <option value="Л.Пилютова 50к3">Л.Пилютова 50к3, м.Проспект Ветеранов</option>
		 <option value="Народного Ополчения 10">Народного Ополчения 10, м.Ленинский Проспект</option>
		 <option value="Б. Смоленский 12">Б. Смоленский 12, м.Елизаровская</option>
      </select> 
<textarea id="comment1" name="comment" type="text" placeholder="Комментарий"></textarea> 
	
	<div class="soglas">
		<input type="checkbox" /> <span onClick="CheckClick(this)" class="hand">Согласна(ен) с <a href="//gymbalance.ru/wp-content/themes/gymbalance/politika-konfidencialnosti.pdf" target="_blank">условиями</a> обработки персональных данных</span><br />
	</div>
<button type="submit" id="submit1" value="отправить" /> Записаться </button> 
</form> 
<a class="close_det" title="Закрыть" href="#close_det"></a>

<!-- отправка формы групповые-->
<script>
function send_form_gruppa() { 
var msg = $("#forma-gruppa").serialize();
$.ajax({
type: "POST",
url: "/wp-content/themes/gymbalance/sends/send-gruppa.php",
data: msg,
success: function(data) {
alert("Заявка отправлена, мы скоро с вами свяжемся)");
setTimeout(function () {
$(".overlay_det").fadeOut();}, 10);
	setTimeout(function () {
		$(".popup_det").fadeOut();}, 10);
},
error:  function(xhr, str){
alert("Возникла ошибка!");
setTimeout(function () {$(".overlay_det").fadeOut();}, 10);
		setTimeout(function () {
		$(".popup_det").fadeOut();}, 10);
}
});
}

</script>

Когда я копирую эту форму на другую страницу, меняю название функции, id и отвечающий файл php и форма не работает. Почему?

<a href="#win1" id="submit_banner">Записаться</a> 

<a href="#x" class="overlay_det" id="win1"></a> 
<div class="popup_det"> 
<form method="post" action="javascript:void(0);" onsubmit="send-form();" id="gruppa-balt"> 
<input id="na-glav" name="fio" placeholder="Ф.И.О" /> 
<input id="na-glav" type="text" name="phone" placeholder="Телефон" /> 
<input id="na-glav" type="text" name="age" placeholder="Возраст девочки" /> 
	
<textarea id="comment1" name="comment" type="text" placeholder="Комментарий"></textarea> 
	
	<div class="soglas">
		<input type="checkbox" /> <span onClick="CheckClick(this)" class="hand">Согласна(ен) с <a href="//gymbalance.ru/wp-content/themes/gymbalance/politika-konfidencialnosti.pdf" target="_blank">условиями</a> обработки персональных данных</span><br />
	</div>
<button type="submit" id="submit1" value="отправить" /> Записаться </button> 
</form> 
<a class="close_det" title="Закрыть" href="#close_det"></a>

<script>
function send-form() { 
var msg = $("#gruppa-balt").serialize();
$.ajax({
type: "POST",
url: "/wp-content/themes/gymbalance/sends/grup-balt.php",
data: msg,
success: function(data) {
alert("Заявка отправлена, мы скоро с вами свяжемся)");
setTimeout(function () {
$(".overlay_det").fadeOut();}, 10);
	setTimeout(function () {
		$(".popup_det").fadeOut();}, 10);
},
error:  function(xhr, str){
alert("Возникла ошибка!");
setTimeout(function () {$(".overlay_det").fadeOut();}, 10);
		setTimeout(function () {
		$(".popup_det").fadeOut();}, 10);
}
});
}

</script>

Примечательно, что если в названии функции send-form изменить - на _, то форма отправляет, но не через grup-balt.php, а через send-gruppa.php.
Почему? Как сделать ещё одну уникальную независимую форму?

Answer 1

[iRedds]

Имена переменных и функций не могут содержать символ "-".
Ограничения имен переменных и функций

Я бы сделал так... одна функция для всех форм

form 1
<form method="post" action="/wp-content/themes/gymbalance/sends/send-gruppa.php" 
onsubmit="sendMyForm(event)" id="forma-gruppa">
form 2
<form method="post" action="/wp-content/themes/gymbalance/sends/grup-balt.php" 
onsubmit="sendMyForm(event)" id="gruppa-balt">

function sendMyForm(event) {
event.preventDefault(); // останавливаем событие. 
$.ajax({
type: "POST",
url: event.target.action, //берем url из action
data : $(event.target).serialize() //берем данные с текущей формы
//..... ну и т.д.

Comments

[Андрей Филимонов]

Да, в этом проблема, спасибо)
одна функция для всех форм не подходит