Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.03.2022, 11:50
Интересующийся
Отправить личное сообщение для dvbshka Посмотреть профиль Найти все сообщения от dvbshka
 
Регистрация: 07.05.2020
Сообщений: 17

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

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

Код самих форм в шаблоне сайта, в них я поменял 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;
	});
});


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

Последний раз редактировалось dvbshka, 16.03.2022 в 11:54.
Ответить с цитированием
  #2 (permalink)  
Старый 16.03.2022, 12:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,129

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

в шаблоне строки 4, 6, 7 , 22, 24, 25 -- придумать 6 разных классов
Ответить с цитированием
  #3 (permalink)  
Старый 16.03.2022, 15:58
Интересующийся
Отправить личное сообщение для dvbshka Посмотреть профиль Найти все сообщения от dvbshka
 
Регистрация: 07.05.2020
Сообщений: 17

Сделал как вы написали, не сработало, так же не показывает сообщение, что письмо отправилось.
Письма отправляются, но пользователь не знает, отправилось оно или нет, в консоле тоже ошибок нет.
Уже устал с этим делом, перепробовал уже много чего, без результатно(
Когда убираешь одну форму, то другая работает корректно.
Ответить с цитированием
  #4 (permalink)  
Старый 16.03.2022, 16:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,129

Сообщение от dvbshka
Сделал как вы написали,
код где?
Ответить с цитированием
  #5 (permalink)  
Старый 16.03.2022, 16:09
Интересующийся
Отправить личное сообщение для dvbshka Посмотреть профиль Найти все сообщения от dvbshka
 
Регистрация: 07.05.2020
Сообщений: 17

Шаблон

<!-- первая форма-->
<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;
	});
});


Сейчас это выглядит как то так
Ответить с цитированием
  #6 (permalink)  
Старый 16.03.2022, 16:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,129

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>
Ответить с цитированием
  #7 (permalink)  
Старый 16.03.2022, 16:12
Интересующийся
Отправить личное сообщение для dvbshka Посмотреть профиль Найти все сообщения от dvbshka
 
Регистрация: 07.05.2020
Сообщений: 17

Спасибо, сейчас буду пробовать!
Ответить с цитированием
  #8 (permalink)  
Старый 16.03.2022, 16:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,129

Сообщение от рони
придумать 6 разных классов
Ответить с цитированием
  #9 (permalink)  
Старый 16.03.2022, 16:16
Интересующийся
Отправить личное сообщение для dvbshka Посмотреть профиль Найти все сообщения от dvbshka
 
Регистрация: 07.05.2020
Сообщений: 17

Я понял(( Только теперь дошло до меня, извиняюсь, сейчас проверю и отпишусь!
Ответить с цитированием
  #10 (permalink)  
Старый 16.03.2022, 18:29
Интересующийся
Отправить личное сообщение для dvbshka Посмотреть профиль Найти все сообщения от dvbshka
 
Регистрация: 07.05.2020
Сообщений: 17

рони,

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Несколько каруселей на одной странице Радиойод Общие вопросы Javascript 2 26.10.2017 19:17
Как перейти от одной формы к другой не используя header? Белая_Кошка Серверные языки и технологии 4 01.04.2010 02:47
Два одинаковых сценария на одной странице Genetics Общие вопросы Javascript 7 12.07.2009 01:46
Две одинаковые страницы: на одной скрипты видны, на другой нет Маня Общие вопросы Javascript 9 03.06.2009 11:57
Вставка текста с одной страницы в форму на другой странице Dima Общие вопросы Javascript 19 22.01.2009 17:35