Несколько одинаковых форм обратной связи на одной странице

[stalex]

Всем привет!
Имеется 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>';
}
}
 
 ?>

Буду очень признателен, если кто-то подскажет способ размещения на странице одинаковых форм.

[danik.js]

Не нужно ничего копировать, че за глупости.
1) Замени id на классы (ибо id могут быть уникальными, а у тебя форма не уникальна, а имеет дубликат)
2) В обработчике указывай контекст поиска по селектору, чтобы ограничиться поиском впределах активной формы:

var form = this;
....
$('.note', form).ajaxComplete ...

[petyaeva]

Ну, я тоже о том же. С 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>

[Велимудр]

var form = this;
....
$('.note', form).ajaxComplete ...

Добрый день.
Распишите, пожалуйста, подробнее, как это всё сделать? скрипт, оказывается, идентичный предоставленному автором темы.
Переписывал под себя, работает безотказно, но проблема возникла такая же, с посадочной страницей, там по меньшей мере 5 форм....
отправляю первую, остальные повторяют действия.
идентификаторы менял на классы, но именно уведомления всплывающие показывают все формы.

[slava082]

var form = this;
....
$('.note', form).ajaxComplete ...

Тут классами не решить. Она будет отправлять данные с первой формы.
А со второй итд данные не будут уходить. И придет пустое сообщение с первой формы. Есть другие варианты этого решения ?

[Timurkin]

У меня такая же проблема.
Есть две одинаковые формы с одинаковыми классами:

<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 написать, чтобы ограничиться поиском в пределах активной формы?

[laimas]

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()

[Timurkin]

Сделал:

$("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() {

Без изменений(((

[laimas]

Что есть $form в аргументе функции? Если DOM объект, то так $($form).serialize(), если JQ объект, то так $form.serialize(). Именно текущую форму отправлять надо, а не то что под руки попало - $("input.name").....

[Timurkin]

Ну как я понимаю это JQ-объект. Переделал но все равно не работает(
Вот сайт:
http://hol-rem.web-tim.ru/