Несколько одинаковых форм обратной связи на одной странице
Всем привет!
Имеется landing-page с одинаковыми формами обратной связи в разных местах страницы (два поля - телефон и имя). Необходимо, чтобы данные передавались на e-mail, при этом производилась проверка на заполненность полей и в случае успешной передачи информации выводилось сообщение об этом. Все это без перезагрузки страницы. Одна форма работает, а вот остальные нет. Простым копированием, как я понял, не обойтись.
<form id="ajax-contact-form" action="javascript:alert('Отправлено!');">
<INPUT type="text" id="poly" name="name" placeholder="Имя" value=""><br /><br />
<INPUT type="text" id="poly" name="email" placeholder="Телефон" value=""><br /><br />
<div id="note"></div>
<input id="sub" type="image" src="img/but-spec.png"/>
</form>
$(document).ready(function ()
{
$("#ajax-contact-form").submit(function ()
{
var str = $(this).serialize();
$.ajax(
{
type: "POST",
url: "contact.php",
data: str,
success: function (msg)
{
$("#note").ajaxComplete(function (event, request, settings)
{
if (msg == 'OK') // Если сообщение отправлено, поблагодарим пользователя
{
result = '<div class="notification_ok">Ваше сообщение отправлено. Спасибо!</div>';
$("#fields").hide();
}
else
{
result = msg;
}
$(this).html(result);
});
}
});
return false;
});
});
<?php
if(!empty($_POST))
{
$name = htmlspecialchars($_POST['name']);
$email = $_POST['email'];
$message = "Сообшение прислал $name, ответьте на $email";
$error = array();
// Если не введено имя
if(empty($name))
{
$error[] = 'Укажите Ваше имя.';
}
// Если не введен email
if(empty($email))
{
$error[] = 'Укажите Ваш e-mail.';
// проверим корректность email
}
if(empty($error))
{ // отправляем email средствами php
$mail =
mail("stalex010@gmail.com", "the subject", $message,
"From: webmaster\r\n"
."Reply-To: webmaster\r\n"
."X-Mailer: PHP/" . phpversion());
if($mail)
{
echo 'Передано сообщение!';
}
}
else
{
echo '<div class="notification_error">'.implode('<br />', $error).'</div>';
}
}
?>
Буду очень признателен, если кто-то подскажет способ размещения на странице одинаковых форм. |
Не нужно ничего копировать, че за глупости.
1) Замени id на классы (ибо id могут быть уникальными, а у тебя форма не уникальна, а имеет дубликат) 2) В обработчике указывай контекст поиска по селектору, чтобы ограничиться поиском впределах активной формы:
var form = this;
....
$('.note', form).ajaxComplete ...
|
Ну, я тоже о том же. С id поняла, а вот второе не поняла. Я форму не сама писала, переделать хочу
<script language="javascript" type="text/javascript">
window.addEvent('domready', function() {
$('amCallMeBackForm').getElements('input').addEvents({
focus: function() {
if ( this.value == '<?php echo $amNameText; ?>' || this.value == '<?php echo $amPhoneText; ?>' ) {
this.value = '';
this.addClass('amCallMeBack-input-act');
}
}
});
$('amCallMeBackShowForm').addEvent('click', function(event) {
event.stop();
$('amCallMeBackIntro').destroy();
$('amCallMeBackForm').setStyle('display','block');
});
$('amCallMeBackForm').getElements('form').addEvent('submit', function(e) {
new Event(e).stop();
new Request({
method: "post",
data: this,
onRequest: function() {
$('amCallMeBackForm').empty().addClass('amCallMeBackWait');
},
onComplete: function() {
$('amCallMeBackForm').removeClass('amCallMeBackWait');
$('amCallMeBackForm').addClass('amCallMeBackSent');
$('amCallMeBackForm').set('html', '<?php echo $amSendedText; ?>');
}
}).send();
});
});
</script>
<div class="amCallMeBackWrap">
<div id="amCallMeBackIntro">
<a href="javascript:void(0)" id="amCallMeBackShowForm">
<img class="icon" src="<?php echo JURI::root().'modules'.DS.'mod_amcallmeback'.DS.'assets'.DS.'callmeback.png'; ?>" />
<?php echo $amHeadText; ?>
</a>
</div>
<div id="amCallMeBackForm">
<h3><?php echo $amHeadText; ?></h3>
<?php if( $amIntroText != '' ) : ?>
<p class="amCallMebackIntroText"><?php echo $amIntroText; ?></p>
<?php endif; ?>
<form method="post" action="<?php echo $_SERVER['REQUEST_URI']; ?>">
<input type="text" name="name" class="amCallMeback-input" value="<?php echo $amNameText; ?>" />
<br />
<input type="text" name="phone" class="amCallMeback-phone" value="<?php echo $amPhoneText; ?>" />
<br />
<input type="submit" value="<?php echo $amButtonText; ?>" class="amCallMeback-button" />
<input type="hidden" name="action" value="amcallmebacksend" />
<input type="hidden" name="uri" value="<?php echo JURI::current(); ?>" />
<?php echo JHTML::_( 'form.token' ); ?>
</form>
</div>
</div>
|
Цитата:
Распишите, пожалуйста, подробнее, как это всё сделать? скрипт, оказывается, идентичный предоставленному автором темы. Переписывал под себя, работает безотказно, но проблема возникла такая же, с посадочной страницей, там по меньшей мере 5 форм.... отправляю первую, остальные повторяют действия. идентификаторы менял на классы, но именно уведомления всплывающие показывают все формы. |
Цитата:
А со второй итд данные не будут уходить. И придет пустое сообщение с первой формы. Есть другие варианты этого решения ? |
Обработка двух одинаковых форм jquery
У меня такая же проблема.
Есть две одинаковые формы с одинаковыми классами: <form name="sentMessage" class="contactForm" novalidate=""> <div class="modal-body"> <div class="form-group"> <input type="text" class="form-control name" placeholder="Ваше имя" required="" data-validation-required-message="Пожалуйста,введите ваше имя" aria-invalid="false"> <p class="help-block text-danger"></p> </div> <div class="form-group"> <input type="phone" class="form-control phone" placeholder="Ваш телефон" required="" data-validation-required-message="Пожалуйста,введите ваш телефон" aria-invalid="false"> <p class="help-block text-danger"></p> </div> <div class="form-group"> <textarea class="form-control message" placeholder="Комментарий" required="" data-validation-required-message="Пожалуйста,введите ваше сообщение"></textarea> <p class="help-block text-danger"></p> </div> <div class="clearfix"></div> </div> <div class="modal-footer"> <div class="success"></div> <button type="submit" class="btn center-block btn-outline btn-xl">Отправить</button> </div> </form> И обработка:
$("input,textarea").jqBootstrapValidation({
preventSubmit: true,
submitError: function($form, event, errors) {
// additional error messages or events
},
submitSuccess: function($form, event) {
event.preventDefault(); // prevent default submit behaviour
// get values from FORM
var name = $("input.name").val(),
phone = $("input.phone").val(),
message = $("textarea.message").val();
var firstName = name;
$.ajax({
url: "/mail/contact_me.php",
type: "POST",
data: {
name: name,
phone: phone,
message: message
},
cache: false,
success: function() {
Отправляется только одна из форм, при этом сообщение success срабатывает на обоих формах. Как в jquery написать, чтобы ограничиться поиском в пределах активной формы? |
Цитата:
data: $($form).serialize() |
Сделал:
$("input,textarea").jqBootstrapValidation({
preventSubmit: true,
submitError: function($form, event, errors) {
// additional error messages or events
},
submitSuccess: function($form, event) {
event.preventDefault(); // prevent default submit behaviour
// get values from FORM
// var name = $("input.name").val(),
// phone = $("input.phone").val(),
// message = $("textarea.message").val();
// var firstName = name;
$.ajax({
url: "/mail/contact_me.php",
type: "POST",
// data: {
// name: name,
// phone: phone,
// message: message
// },
data: $($form).serialize(),
cache: false,
success: function() {
Без изменений((( |
Что есть $form в аргументе функции? Если DOM объект, то так $($form).serialize(), если JQ объект, то так $form.serialize(). Именно текущую форму отправлять надо, а не то что под руки попало - $("input.name").....
|
Ну как я понимаю это JQ-объект. Переделал но все равно не работает(
Вот сайт: http://hol-rem.web-tim.ru/ |
$("здесь селектор форм должен быть надо полагать, а не поля").jqBootstrapValidation...
|
Цитата:
$(".contactForm").jqBootstrapValidation... безуспешно... |
Отправление есть, но пустых значений, что-то неверно сделано для jqBootstrapValidation, читайте док его, тем более, что не смотря на его подключение отправлять формой можно все чего душа желает.
|
Цитата:
|
Цитата:
У вас одна форма изначально скрыта, но будучи на странице получает обработчик. Но вот отправление в одном из случаев, это пустые поля, и если данные отправляемые, это $(form).serialize(), значит поля формы очищаются кем-то, в противном случае, данных бы вообще не было. А судя по результату ответа, тексту на кнопке отправления, текущей всегда является вторая форма. |
| Часовой пояс GMT +3, время: 16:19. |