10.09.2013, 20:02
|
Новичок на форуме
|
|
Регистрация: 10.09.2013
Сообщений: 1
|
|
Несколько одинаковых форм обратной связи на одной странице
Всем привет!
Имеется 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>';
}
}
?>
Буду очень признателен, если кто-то подскажет способ размещения на странице одинаковых форм.
|
|
11.09.2013, 07:17
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
Не нужно ничего копировать, че за глупости.
1) Замени id на классы (ибо id могут быть уникальными, а у тебя форма не уникальна, а имеет дубликат)
2) В обработчике указывай контекст поиска по селектору, чтобы ограничиться поиском впределах активной формы:
var form = this;
....
$('.note', form).ajaxComplete ...
__________________
В личку только с интересными предложениями
|
|
12.09.2013, 18:41
|
Новичок на форуме
|
|
Регистрация: 31.07.2009
Сообщений: 4
|
|
Ну, я тоже о том же. С 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>
|
|
17.09.2014, 11:07
|
Новичок на форуме
|
|
Регистрация: 17.09.2014
Сообщений: 1
|
|
Сообщение от danik.js
|
Не нужно ничего копировать, что за глупости.
1) Замени id на классы (ибо id могут быть уникальными, а у тебя форма не уникальна, а имеет дубликат)
2) В обработчике указывай контекст поиска по селектору, чтобы ограничиться поиском в пределах активной формы:
var form = this;
....
$('.note', form).ajaxComplete ...
|
Добрый день.
Распишите, пожалуйста, подробнее, как это всё сделать? скрипт, оказывается, идентичный предоставленному автором темы.
Переписывал под себя, работает безотказно, но проблема возникла такая же, с посадочной страницей, там по меньшей мере 5 форм....
отправляю первую, остальные повторяют действия.
идентификаторы менял на классы, но именно уведомления всплывающие показывают все формы.
|
|
26.07.2016, 09:16
|
Новичок на форуме
|
|
Регистрация: 15.07.2015
Сообщений: 1
|
|
Сообщение от danik.js
|
Не нужно ничего копировать, че за глупости.
1) Замени id на классы (ибо id могут быть уникальными, а у тебя форма не уникальна, а имеет дубликат)
2) В обработчике указывай контекст поиска по селектору, чтобы ограничиться поиском впределах активной формы:
var form = this;
....
$('.note', form).ajaxComplete ...
|
Тут классами не решить. Она будет отправлять данные с первой формы.
А со второй итд данные не будут уходить. И придет пустое сообщение с первой формы. Есть другие варианты этого решения ?
|
|
23.04.2018, 12:10
|
Аспирант
|
|
Регистрация: 12.08.2017
Сообщений: 50
|
|
Обработка двух одинаковых форм 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 написать, чтобы ограничиться поиском в пределах активной формы?
|
|
23.04.2018, 12:49
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Сообщение от Timurkin
|
var name = $("input.name").val(),
phone = $("input.phone").val(),
message = $("textarea.message").val();
var firstName = name;
data: {
name: name,
phone: phone,
message: message
}
|
data: $($form).serialize()
|
|
23.04.2018, 13:26
|
Аспирант
|
|
Регистрация: 12.08.2017
Сообщений: 50
|
|
Сделал:
$("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() {
Без изменений(((
|
|
23.04.2018, 13:30
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Что есть $form в аргументе функции? Если DOM объект, то так $($form).serialize(), если JQ объект, то так $form.serialize(). Именно текущую форму отправлять надо, а не то что под руки попало - $("input.name").....
|
|
23.04.2018, 15:33
|
Аспирант
|
|
Регистрация: 12.08.2017
Сообщений: 50
|
|
Ну как я понимаю это JQ-объект. Переделал но все равно не работает(
Вот сайт:
http://hol-rem.web-tim.ru/
|
|
|
|