Несколько одинаковых форм отправки на почту
 

Здравствуйте, вопрос неоднократно обсуждался, но так и не смог решить проблему. Имеется скрипт который передает данные в пхп, который отправляет данные на почту. Так как форм несколько то соответственно работает только одна, так как один и те же id нельзя использовать, это я уже уяснил. Но вот как поправить это все дело не приложу ума, из за низкого уровня знаний js

<form method="POST" id="feedback-form_1">

<input type="text" class="form_top_input" name="nameFF" required placeholder="Ваше имя" x-autocompletetype="name">

<input  type="text" name="messageFF" class="form_top_input" required placeholder="Телефон">
			
<button type="submit" class="btn_top"><img class="btn_head" src="img/button-head.png"></button>

</form>
</form>

document.getElementById('feedback-form_1').addEventListener('submit', function(evt){
  var http = new XMLHttpRequest(), f = this;
  evt.preventDefault();
  http.open("POST", "contacts.php", true);
  http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  http.send("nameFF=" + f.nameFF.value + "&messageFF=" + f.messageFF.value);
  http.onreadystatechange = function() {
    if (http.readyState == 4 && http.status == 200) {
      alert(http.responseText + ', Ваше сообщение получено.\nНаши специалисты ответят Вам в течении 2-х дней.\nБлагодарим за интерес к нашей фирме!');    
      f.messageFF.removeAttribute('value'); // очистить поле сообщения (две строки)
      f.messageFF.value='';
    }
  }
  http.onerror = function() {
    alert('Извините, данные не были переданы');
  }
}, false);

<?
if (array_key_exists('messageFF', $_POST)) {
   $to = '22222@gmail.com';
   $subject = 'Заполнена контактная форма с '.$_SERVER['HTTP_REFERER'];
   $subject = "=?utf-8?b?". base64_encode($subject) ."?=";
   $message = "Имя: ".$_POST['nameFF']."\nТелефон: ".$_POST['messageFF'];
   $headers = 'Content-type: text/plain; charset="utf-8"';
   $headers .= "MIME-Version: 1.0\r\n";
   $headers .= "Date: ". date('D, d M Y h:i:s O') ."\r\n";
   mail($to, $subject, $message, $headers);
   echo $_POST['nameFF'];
}
?>

Подскажите пожалуйста, желательно живым примером, как поправить скрипт так что бы он обрабатывал не id а классы, то есть что бы одинаковых форм можно было вставить несколько

А зачем много одинаковых форм на странице? Хотя, если в этом есть необходимость, можно иметь на странице кучу форм, и если все их отправлять асинхронно, то обработчик можно установить так:

document.querySelectoor('form').addEventListener.. ..

При этом сервер может определять форму-источник запроса либо по скрытому полю, либо по именам полей как единому их ключу.

Много одинаковых форм используются на лендинге, где почти через блок отправка заявки. Не сработал данный метод, перебрасывает на форму выше при заполнении. Всем формам прописал класс form.

Что-то с трудом вяжется куча форм со понятием лендинга. )

Какой метод - document.querySelectoor('form').addEventListener?

Это установка на одну форму, а на несколько, нужно сперва получить формы, обойти циклом, и на каждую из них повесить обработчик.

[].slice.call(document.querySelectorAll('form')).forEach(function(f) { 
    f.addEventListener('submit', function(e) {
        e.preventDefault();
        .....
        http.send("nameFF=" + this.nameFF.value + "&messageFF=" + this.messageFF.value);
        ...

Вот к примеру зачем использовать много форм. http://partners-work.com/4/ для такого вот дизайна. Мои знания в скриптах очень скудны. Не могли бы вы расписать как именно должна выглядеть вся структура ?

Лендинг, это в общем то выжимка самой соли, чтобы привлечь, а по ссылке что-то ближе к одностраничному сайту, много форм, действий. Но я же не говорю что нельзя, да на здоровье. )

У вас подключается jQuery, поэтому можно упростить все:

1) В теле страницы, внизу, подключается скрипт, тот что до вашей попытки отправки форм. Его содержание следующее:

$(function() {
    $('#dg-container').gallery({
	autoplay	:	true
    });
});

Перепишите его так:

$(function() {
    $('#dg-container').gallery({
	autoplay	:	true
    });

    $('form').submit(function(e) {
        e.preventDefault();
        var f = this; //это текущая форма
        $.ajax(
            type: "POST",
            url: "contacts.php", //если скрипт обработчик один у всех форм, иначе лучше получать это из action формы
            data: $(this).serialize(),
            success: function(q){
                alert(q + ', Ваше сообщение получено.\nНаши специалисты ответят Вам в течении 2-х дней.\nБлагодарим за интерес к нашей фирме!');
                //Это убрать
                //f.messageFF.removeAttribute('value'); //value - это свойство, 
                //f.messageFF.value='';
                //очистить форму, это так
                f.reset();
            } 
        );
    });
});

Только не понятно зачем очищать поля формы, к тому же только одного messageFF, да и к сообщению оно как-то не подходит. Не понятно каким же образом сервер будет понимать что за форма пришла, ведь есть отправка одних и тех же данных, но для: Заказать замер, Заказать услугу, Оформить заявку.


2) Скрипт в котором document.getElementById('feedback-form_1').addEventListener('submit', function(evt){.... - удалить.


PS. Разница по Гринвичу будет возвращаться для времени сервера, а не клиента, так что смысла особого в ней нет.

Сделал по вашему примеру, по той же ссылке, все равно при заполнении и и клику по кнопке отправить перекидывает на другую форму((( что за беда такая...

У вас кнопки отправки форм вне тега формы расположены.

:)
А это то зачем перенесено в код?

//Это убрать
//f.messageFF.removeAttribute('value'); //value - это свойство, 
//f.messageFF.value='';
//очистить форму, это так

Странные однако у вас формы. )

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


http://partners-work.com/10/