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

[uran2282]

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

[laimas]

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

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

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

[uran2282]

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

[laimas]

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

Не сработал данный метод

Какой метод - 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);
        ...

[uran2282]

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

[laimas]

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

У вас подключается 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. Разница по Гринвичу будет возвращаться для времени сервера, а не клиента, так что смысла особого в ней нет.

[uran2282]

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

[laimas]

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

[laimas]

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

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

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

[uran2282]

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


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