Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Две формы на одной странице работают не корректно (https://javascript.ru/forum/jquery/83799-dve-formy-na-odnojj-stranice-rabotayut-ne-korrektno.html)

dvbshka 16.03.2022 11:50
Две формы на одной странице работают не корректно
 
Добрый день!
У меня такой вопрос, есть на сайте форма обратной связи и я хотел её клонировать и создать вторую форму с другим названием и полями, но после данных манипуляций первая и вторая форма работают не корректно, сообщения приходят, но при отправке, форма просто остается открытой, без уведомления что отправка прошла успешно.

Привожу код формы:

Код самих форм в шаблоне сайта, в них я поменял form id и action чтобы они были разные и путь до скрипта:

<!-- Первая форма -->
<script src="https://Мой домен.ru/contact.js"></script>

<form id="contact" action="Мой домен.ru/mail.php" method="post">
<H3 style="text-align: center;">Получить оптовую цену</H3>
<div id="note"></div>
<div id="fields">
	<p><input type="text" name="namel" id="author" placeholder="Ваше имя:"></p>
	<p><input type="tel" pattern="+7[0-9]{10}" name="tel" id="url" placeholder="Телефон в формате +7-999-999-99-99" required></p>
	<p><input type="email" name="email" id="email" placeholder="Ваш E-mail:" required></p>
	<!--p><input type="text" name="sub" id="url" placeholder="Тема" required></p-->
	<p><textarea name="message" cols="1" rows="10" id="comment" placeholder="Введите сюда текст сообщения:"></textarea></p>
	<p><input type="hidden" name="tit" value="Купить {{ heading_title }} " /></p>
        <p><input type="hidden" name="sub" value="Пользователь хочет Получить оптовую цену на {{ heading_title }}" /></p>          	
	<p style="text-align: center;"><button type="submit" id="submit" class="go">Отправить сообщение</button></p>
</div>
</form>

<!-- Вторая форма -->
<script src="https://Мой домен.ru/contactsf.js"></script>

<form id="contacts" action="https://Мой домен.ru/mails.php" method="post">
<H3 style="text-align: center;">Хочу купить дешевле</H3>
<div id="note"></div>
<div id="fields">
	<p><input type="text" name="namel" id="author" placeholder="Ваше имя:"></p>
	<p><input type="tel" pattern="+7[0-9]{10}" name="tel" id="url" placeholder="Телефон в формате +7-999-999-99-99" required></p>
	<p><input type="email" name="email" id="email" placeholder="Ваш E-mail:" required></p>
	<!--p><input type="text" name="sub" id="url" placeholder="Тема" required></p-->
	<p><textarea name="message" cols="1" rows="10" id="comment" placeholder="Введите сюда текст сообщения:"></textarea></p>
	<p><input type="hidden" name="tit" value="Купить {{ heading_title }}" /></p>
        <p><input type="hidden" name="sub" value="Пользователь хочет Купить дешевле товар {{ heading_title }}" /></p>          	
	<p style="text-align: center;"><button type="submit" id="submit" class="go">Отправить сообщение</button></p>
</div> 
</form>



Код обработчика для первой формы выглядит так mail.php:

<?php
				
$post = (!empty($_POST)) ? true : false;
if($post) {
	$namel = htmlspecialchars(trim($_POST['namel']));
	$sub = htmlspecialchars(trim($_POST["sub"]));
	$email = htmlspecialchars(trim($_POST['email']));
	$message = htmlspecialchars(trim($_POST['message']));
	$tit = htmlspecialchars(trim($_POST['tit']));
	$tel = htmlspecialchars(trim($_POST['tel']));
	$error = '';
	
	if(!$namel) {$error .= 'Укажите свое имя. ';}
	if(!$email) {$error .= 'Укажите электронную почту. ';}
	if(!$sub) {$error .= 'Укажите тему обращения. ';}
	if(!$message || strlen($message) < 1) {$error .= 'Введите сообщение. ';}
	if(!$error) {
		$ref = $_SERVER['HTTP_REFERER'];
		$address = "sale@мой домен.ru";
		$mes = "Заявка с кнопки (Получить оптовую цену)\n\nИмя:  ".$namel."\n\nНомер телефона:  ".$tel."\n\nПочта:  ".$email."\n\nСообщение:  ".$message."\n\nСтраница отправки сообщения:\n".$tit."\n".$ref."\n";
		$send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = UTF-8\r\nReply-To:$email\r\nFrom:Магазин товаров <contact>");
		if($send) {echo 'OK';}
	}
	else {echo '<div class="err">'.$error.'</div>';}	
}

?>



Код обработчика для второй формы выглядит так mails.php:

<?php
				
$post = (!empty($_POST)) ? true : false;
if($post) {
	$namel = htmlspecialchars(trim($_POST['namel']));
	$sub = htmlspecialchars(trim($_POST["sub"]));
	$email = htmlspecialchars(trim($_POST['email']));
	$message = htmlspecialchars(trim($_POST['message']));
	$tit = htmlspecialchars(trim($_POST['tit']));
	$tel = htmlspecialchars(trim($_POST['tel']));
	$error = '';
	
	if(!$namel) {$error .= 'Укажите свое имя. ';}
	if(!$email) {$error .= 'Укажите электронную почту. ';}
	if(!$sub) {$error .= 'Укажите тему обращения. ';}
	if(!$message || strlen($message) < 1) {$error .= 'Введите сообщение. ';}
	if(!$error) {
		$ref = $_SERVER['HTTP_REFERER'];
		$address = "sale@мой домен.ru";
		$mes = "Заявка с кнопки (Хочу купить дешевле)\n\nИмя:  ".$namel."\n\nНомер телефона:  ".$tel."\n\nПочта:".$email."\n\nСообщение:  ".$message."\n\nСтраница отправки сообщения:\n".$tit."\n".$ref."\n";
		$send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = UTF-8\r\nReply-To:$email\r\nFrom:Магазин товаров <contact>");
		if($send) {echo 'OK';}
	}
	else {echo '<div class="err">'.$error.'</div>';}		
}

?>


И наконец, то на что я грешу собственно и не знаю как с этим работать:

Скрипт для первой формы contact.js:

jQuery(document).ready(function($) {
	$("#contact").submit(function() {
		var str = $(this).serialize();
		$.ajax({
			type: "POST",
			url: "https://мой домен.ru/mail.php",
			data: str,
			success: function(msg) {
				if(msg == 'OK') {
					result = '<div class="ok">Сообщение отправлено</div>';
					$("#fields").hide();
				}
				else {result = msg;}
				$('#note').html(result);
			}
		});
		return false;
	});
});


Скрипт для второй формы contactsf.js:

jQuery(document).ready(function($) {
	$("#contacts").submit(function() {
		var str = $(this).serialize();
		$.ajax({
			type: "POST",
			url: "https://мой домен.ru/mails.php",
			data: str,
			success: function(msg) {
				if(msg == 'OK') {
					result = '<div class="ok">Сообщение отправлено</div>';
					$("#fields").hide();
				}
				else {result = msg;}
				$('#note').html(result);
			}
		});
		return false;
	});
});


Может быть это и глупый вопрос, но что нужно подправить в этих скриптах, чтобы формы работали не зависимо друг от друга и не влияли друг на друга?
Заранее спасибо!

рони 16.03.2022 12:51
dvbshka,
добавить разные классы всем id, и в скриптах указать только эти классы, выкинуть все #. строки 2, 11, 14 в обоих скриптах.

в шаблоне строки 4, 6, 7 , 22, 24, 25 -- придумать 6 разных классов

dvbshka 16.03.2022 15:58
Сделал как вы написали, не сработало, так же не показывает сообщение, что письмо отправилось.
Письма отправляются, но пользователь не знает, отправилось оно или нет, в консоле тоже ошибок нет.
Уже устал с этим делом, перепробовал уже много чего, без результатно(
Когда убираешь одну форму, то другая работает корректно.

рони 16.03.2022 16:00
Цитата:
Сообщение от dvbshka
Сделал как вы написали,
код где?

dvbshka 16.03.2022 16:09
Шаблон

<!-- первая форма-->
<script src="https://Мойдомен/contact.js"></script>

<form id="contact" action="https://Мойдомен/mail.php" method="post">
<H3 style="text-align: center;">Получить оптовую цену</H3>
<div id="note"></div>
<div id="fields">
	<p><input type="text" name="namel" id="author" placeholder="Ваше имя:"></p>
	<p><input type="tel" pattern="+7[0-9]{10}" name="tel" id="url" placeholder="Телефон в формате +7-999-999-99-99" required></p>
	<p><input type="email" name="email" id="email" placeholder="Ваш E-mail:" required></p>
	<!--p><input type="text" name="sub" id="url" placeholder="Тема" required></p-->
	<p><textarea name="message" cols="1" rows="10" id="comment" placeholder="Введите сюда текст сообщения:"></textarea></p>
	<p><input type="hidden" name="tit" value="Купить {{ heading_title }} в Москве | Цена на {{ heading_title }}" /></p>
        <p><input type="hidden" name="sub" value="Пользователь хочет Получить оптовую цену на {{ heading_title }}" /></p>          	
	<p style="text-align: center;"><button type="submit" id="submit" class="go">Отправить сообщение</button></p>
</div>
</form>

<!-- вторая форма-->

<script src="https://Мойдомен/formatoo.js"></script>
<form id="formatoo" action="https://Мойдомен/mails.php" method="post">
<H3 style="text-align: center;">Хочу купить дешевле</H3>
<div id="notes"></div>
<div id="fieldss">
	<p><input type="text" name="namel" id="authors" placeholder="Ваше имя:"></p>
	<p><input type="tel" pattern="+7[0-9]{10}" name="tel" id="urls" placeholder="Телефон в формате +7-999-999-99-99" required></p>
	<p><input type="email" name="email" id="emails" placeholder="Ваш E-mail:" required></p>
	<!--p><input type="text" name="sub" id="urls" placeholder="Тема" required></p-->
	<p><textarea name="message" cols="1" rows="10" id="comments" placeholder="Введите сюда текст сообщения:"></textarea></p>
	<p><input type="hidden" name="tit" value="Купить {{ heading_title }} в Москве | Цена на {{ heading_title }}" /></p>
        <p><input type="hidden" name="sub" value="Пользователь хочет Купить дешевле товар {{ heading_title }}" /></p>          	
	<p style="text-align: center;"><button type="submit" id="submits" class="go">Отправить сообщение</button></p>
</div> 
</form>


В обработчиках ничего не изменилось

И вот скрипты

Первый

jQuery(document).ready(function($) {
	$("contact").submit(function() {
		var str = $(this).serialize();
		$.ajax({
			type: "POST",
			url: "https://мой домен/mail.php",
			data: str,
			success: function(msg) {
				if(msg == 'OK') {
					result = '<div class="ok">Сообщение отправлено</div>';
					$("fields").hide();
				}
				else {result = msg;}
				$('note').html(result);
			}
		});
		return false;
	});
});


Второй

jQuery(document).ready(function($) {
	$("formatoo").submit(function() {
		var str = $(this).serialize();
		$.ajax({
			type: "POST",
			url: "https://мой домен/mails.php",
			data: str,
			success: function(msg) {
				if(msg == 'OK') {
					result = '<div class="ok">Сообщение отправлено</div>';
					$("fieldss").hide();
				}
				else {result = msg;}
				$('notes').html(result);
			}
		});
		return false;
	});
});


Сейчас это выглядит как то так

рони 16.03.2022 16:11
dvbshka,
<body>
<!-- Первая форма -->
<script src="https://Мой домен.ru/contact.js"></script>

<form id="contact" class="mail" action="Мой домен.ru/mail.php" method="post">
<H3 style="text-align: center;">Получить оптовую цену</H3>
<div id="note" class="note_mail"></div>
<div id="fields" class="fields_mail">
	<p><input type="text" name="namel" id="author" placeholder="Ваше имя:"></p>
	<p><input type="tel" pattern="+7[0-9]{10}" name="tel" id="url" placeholder="Телефон в формате +7-999-999-99-99" required></p>
	<p><input type="email" name="email" id="email" placeholder="Ваш E-mail:" required></p>
	<!--p><input type="text" name="sub" id="url" placeholder="Тема" required></p-->
	<p><textarea name="message" cols="1" rows="10" id="comment" placeholder="Введите сюда текст сообщения:"></textarea></p>
	<p><input type="hidden" name="tit" value="Купить {{ heading_title }} " /></p>
        <p><input type="hidden" name="sub" value="Пользователь хочет Получить оптовую цену на {{ heading_title }}" /></p>
	<p style="text-align: center;"><button type="submit" id="submit" class="go">Отправить сообщение</button></p>
</div>
</form>

<!-- Вторая форма -->
<script src="https://Мой домен.ru/contactsf.js"></script>

<form id="contacts" class="two" action="https://Мой домен.ru/mails.php" method="post">
<H3 style="text-align: center;">Хочу купить дешевле</H3>
<div id="note" class="note_two"></div>
<div id="fields" class="fields_two">
	<p><input type="text" name="namel" id="author" placeholder="Ваше имя:"></p>
	<p><input type="tel" pattern="+7[0-9]{10}" name="tel" id="url" placeholder="Телефон в формате +7-999-999-99-99" required></p>
	<p><input type="email" name="email" id="email" placeholder="Ваш E-mail:" required></p>
	<!--p><input type="text" name="sub" id="url" placeholder="Тема" required></p-->
	<p><textarea name="message" cols="1" rows="10" id="comment" placeholder="Введите сюда текст сообщения:"></textarea></p>
	<p><input type="hidden" name="tit" value="Купить {{ heading_title }}" /></p>
        <p><input type="hidden" name="sub" value="Пользователь хочет Купить дешевле товар {{ heading_title }}" /></p>
	<p style="text-align: center;"><button type="submit" id="submit" class="go">Отправить сообщение</button></p>
</div>
</form>
<script>
 jQuery(document).ready(function($) {
	$(".mail").submit(function() {
		var str = $(this).serialize();
		$.ajax({
			type: "POST",
			url: "https://мой домен.ru/mail.php",
			data: str,
			success: function(msg) {
				if(msg == 'OK') {
					result = '<div class="ok">Сообщение отправлено</div>';
					$(".fields_mail").hide();
				}
				else {result = msg;}
				$('.note_mail').html(result);
			}
		});
		return false;
	});
});
 jQuery(document).ready(function($) {
	$(".two").submit(function() {
		var str = $(this).serialize();
		$.ajax({
			type: "POST",
			url: "https://мой домен.ru/mail.php",
			data: str,
			success: function(msg) {
				if(msg == 'OK') {
					result = '<div class="ok">Сообщение отправлено</div>';
					$(".fields_two").hide();
				}
				else {result = msg;}
				$('.note_two').html(result);
			}
		});
		return false;
	});
});

</script>
</body>

dvbshka 16.03.2022 16:12
Спасибо, сейчас буду пробовать!

рони 16.03.2022 16:13
Цитата:
Сообщение от рони
придумать 6 разных классов
:(

dvbshka 16.03.2022 16:16
Я понял(( Только теперь дошло до меня, извиняюсь, сейчас проверю и отпишусь!

dvbshka 16.03.2022 18:29
рони,

Спасибо огромное за помощь! Все прекрасно заработало!:victory:

рони 16.03.2022 18:30
dvbshka,
:dance: :)


Часовой пояс GMT +3, время: 21:52.