Несколько форм обратной связи на сайте. Проблема с обработчиком js. Как реализовать?

Question

[TommyAngel]

Всем здравствуйте)
Уже весь интернет перерыл, но так и не нашел ответа.
На сайте есть несколько форм, есть php mailer с ним нет проблем, но загвостка встала о обработчие js для форм. Итак есть несколько форм:

<form class="contact_form" id="form" >
        <div class="in-form">
		  <input type="hidden"  name="robotpost" value="[e-mail]"/>
		 <p>Ваше имя:</p>
		  <input type="text" name="name" placeholder="Ваше имя" required />
		 <p>Ваш телефон:</p>
		  <input type="tel" name="tel" placeholder="Ваш номер" required />
		 <button class="submit" type="submit" >Заказать звонок</button>
		</div>
        </form>

Еще одна форма:

<form class="right-form" id="osago">		
              <p><b>Ваше имя:</b><br><input type="text" name="nameosago" placeholder="Ваше имя" required></p>
			  <p><b>Телефон:</b><input type="tel" name="phoneosago" placeholder="Ваш телефон" required></p>
			  <button class="butright" type="submit" >Заказать расчет</button>
		</form>

Как видите присвоил id формам.

Есть обработчик

$(document).ready(function () {
    $("form").submit(function () {
        // Получение ID формы
        var formID = $(this).attr('id');
        // Добавление решётки к имени ID
        var formNm = $('#' + formID);
        $.ajax({
            type: "POST",
            url: 'post.php',
            data: formNm.serialize(),
            success: function (data) {
                // Вывод текста результата отправки
                $(formNm).html(data); 
            },
            error: function (jqXHR, text, error) {
                // Вывод текста ошибки отправки
                $(formNm).html(error);         
            }
        });
        return false;
    });
});

Пробовал прописывать вместо "form" id но не выходит, как я понял обработчик этот отправляет данные со всех форм.
Помогите пожалуйста, нужно чтобы при нажатии на кнопку с одной формы отправлял данные на post.php с другой формы например на post2.php

Answer 1

[Алексей Шашенков]

Вот так надо?

Comments

[TommyAngel]

По вашему скрипту у 2-х форм исполняющий файл post.php
А нужно чтобы в первой форме был исполняющий файл post.php
Второй формы post2.php

[Алексей Шашенков]

TommyAngel: Минуту

[Алексей Шашенков]

TommyAngel: Обновил

[TommyAngel]

teknik2008: Спасибо большое!!!
Есть еще маленинький вопрос:
как это сообщение вывести при отправке или при ошибке.
Пока форма просто отсылает данные при этом ничего не выходит.
Код в php файле такой:

if( $mail->send() ){
   echo "<p class='mail' style='margin:0; font-size:26px;'>Спасибо ".$username.".<br>Ваше сообщение отправлено.</p>";
}else{
   echo "<p class='mail' style='margin:0; font-size:26px;'>Извините ".$username.".<br>Произошла ошибка.</p>" . $mail->ErrorInfo;
}

[Алексей Шашенков]

TommyAngel: Ни когда не передовайте html по ajax - прямой путь к xss. Лучше передайте json или текст.
Надо смотреть на сайт, тк кто его где ошибка. Возможно в сети. возможно нет элемента для вывода. зы- лайк и тметка решения не помешает

[TommyAngel]

teknik2008: сайт ссылка
Сейчас формы работают (данные отсылаются правильно). Но нет никаких сообщений об отправке письма или об ошибке.
Как я понимаю это вот эти строчки в коде

function success(data){
   
  }
  
  function error(jqXHR, text, error){
   
  }

В старом коде было так:

success: function (data) {
                // Вывод текста результата отправки
                $(formNm).html(data); 
            },
            error: function (jqXHR, text, error) {
                // Вывод текста ошибки отправки
                $(formNm).html(error);         
            }

Но как я понимаю сейчас нет переменной formNm

[Алексей Шашенков]

TommyAngel: А где оно должно вывести? Просто в коде что в теме, у вас все в форме подменяется на ответ сервера, так надо?

[TommyAngel]

В форме внутри должно после отправки данных отображаться сообщение отправелено, или ошибка. Эти сообщения беруться из исполняемого файла post.php Как я и писал в старом js было сообщение что письмо отправлено. Сейчас нет переменной formNm в вашем коде.
Скажите что нужно прописать в строчках

function success(data){
   
  }
  
  function error(jqXHR, text, error){
   
  }

Чтобы выводить сообщения от отправке.

[Алексей Шашенков]

Обновил, изменил это

[TommyAngel]

teknik2008: Все понял!!!! Спасибо Вы просто Бог)))

Answer 2

[Дмитрий Дарт]

Как-то так, логика думаю понятна

//id уже есть
var formNm = $('#' + formID);

//добавим пару условий
if(formNm == form){
  var page = 'post.php';
}
if(formNm == osago){
  var page = 'post2.php';
}

// Далее где отправка
$.ajax({
            type: "POST",
            url: page,
...

Или в if вместо formNm ставите formID, смотря где у вас чистый id

Comments

[TommyAngel]

Не работает(( При нажатии на кнопку где скрипт должен сообщить о ошибке или успехе, дублируется сайт. форма не отправляет сообщения. Может не так прописал?(

$(document).ready(function () {
    $("form").submit(function () {
        // Получение ID формы
        var formID = $(this).attr('id');
        // Добавление решётки к имени ID
        var formNm = $('#' + formID);
		//добавим пару условий
		if(formNm == form){
		var page = 'post.php';
		}
		if(formNm == osago){
		var page = 'post2.php';
		}

        $.ajax({
            type: "POST",
            url: page,
            data: formNm.serialize(),
            success: function (data) {
                // Вывод текста результата отправки
                $(formNm).html(data); 
            },
            error: function (jqXHR, text, error) {
                // Вывод текста ошибки отправки
                $(formNm).html(error);         
            }
        });
        return false;
    });
});

[Дмитрий Дарт]

Я написал не готовое решение а псевдокод, отладку сделайте что у вас в formNm например console.log(formNm) далее if'ы надо отладить, исполняются они или нет, выведите себе хотя бы console.log(page) перед $.ajax({

[TommyAngel]

if(osago){
		var page = 'post2.php';
		}
		if(feedback){
		var page = 'post.php';
		}

Предварительно в одной форме поменял id на feedback
Так все равно отправляет на post2

[TommyAngel]

if(formID == form){
    var page = 'post.php';
    }
    if(formID == osago){
    var page = 'post2.php';
    }

Не работет, открывает также дубликат сайта где должны быть результаты(

[TommyAngel]

Дмитрий: Как это? Покаже плиз... Я в js вообще 0(((

Answer 3

[Сергей Сергей]

По идее, в теге формы должен быть атрибут action, его и указывать в url.
и кстати, вместо formNm this не катит?

Comments

[TommyAngel]

пробовал через this, скрипт не отрабатывает(

[Сергей Сергей]

TommyAngel: $( this )

[TommyAngel]

Сергей Сергей: непонял) Напиши пример как это пожалуйста)

[Сергей Сергей]

TommyAngel:
$(this).attr('action')
$(this).serialize()

[TommyAngel]

Сергей Сергей:

$(document).ready(function () {
    $("form").submit(function () {
        // Получение ID формы
        var formID = $(this).attr('id');
        // Добавление решётки к имени ID
        var formNm = $('#' + formID);
        $.ajax({
            type: "POST",
            url: 'post.php',
            data: formNm.serialize(),
            success: function (data) {
                // Вывод текста результата отправки
                $(formNm).html(data); 
            },
            error: function (jqXHR, text, error) {
                // Вывод текста ошибки отправки
                $(formNm).html(error);         
            }
        });
        return false;
    });
});

$(this).attr('action')
$(this).serialize()
Куда это вставить?

Answer 4

[Lenar Shaidullin]

Добавить к каждой форме свой идентификатор.

Comments

[TommyAngel]

id="osago" это и есть индентификатор.

Answer 5

[Павел]

а я бы сделал 2 разных скрипта и не парился

$(document).ready(function () {
     $("#osago").submit(function () { 
        var th = $(this);
        $.ajax({
            type: "POST",
            url: "mail.php",
            data: th.serialize()
        }).done(function () {
         alert('все ок');
        });
        return false;
    });
});