@AnnaShant

Как реализовать несколько форм обратной связи на одной странице index.html?

<form class="form" id="form" name="form">
		<input type="text" class="form-field" name="phone" placeholder="Введите ваш телефон">
		<button class="form-button"><span class="text-button">Отправить заявку</span></button>
	</form>

	<footer>
		<div class="overlay js-overlay-thank-you">
			<div class="popup js-thank-you">
				<h2>Спасибо за заявку</h2>
				<div class="close-popup js-close-thank-you"></div>
			</div>
		</div>
	</footer>


//Примерный код
// Отправка заявки 
$(document).ready(function() {
	$('#form').submit(function() { // проверка на пустоту заполненных полей. Атрибут html5 — required не подходит (не поддерживается Safari)
		if (document.form.phone.value == '' ) {
			valid = false;
			return valid;
		}
		$.ajax({
			type: "POST",
			url: "mail.php",
			data: $(this).serialize()
		}).done(function() {
			$('.js-overlay-thank-you').fadeIn();
			$(this).find('input').val('');
			$('#form').trigger('reset');
		});
		return false;
	});
});

// Закрыть попап «спасибо»
$('.js-close-thank-you').click(function() { // по клику на крестик
	$('.js-overlay-thank-you').fadeOut();
});

$(document).mouseup(function (e) { // по клику вне попапа
    var popup = $('.popup');
    if (e.target!=popup[0]&&popup.has(e.target).length === 0){
        $('.js-overlay-thank-you').fadeOut();
    }
});

// Маска ввода номера телефона (плагин maskedinput)
$(function($){
	$('[name="phone"]').mask("+7(999) 999-9999");
});


<?php

$recepient = "11111111@gmail.com";
$siteName = "22222222";

$phone = trim($_POST["phone"]);
$message = "nТелефон: $phone";

$pagetitle = "Заявка с сайта \"$siteName\"";
mail($recepient, $pagetitle, $message, "Content-type: text/plain; charset=\"utf-8\"\n From: $recepient");

?>
  • Вопрос задан
  • 603 просмотра
Решения вопроса 1
Digiport
@Digiport
WebBasic CMS
в jQuery вместо обращения по id $("#form") обращайтесь к форме по классу $(".form") или прям по тегу $("form"), тогда эвент submit будет активироваться на всех формах страницы.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы