Почему не работает отправка формы?

Question

[L1nw0od]

Доброго времени суток, есть на 1 страницу (Лендинг 4 формы) и 1 форма работает все отправляет все супер - но когда отправил одну форму то у других также пишется сразу что (мол спасибо форма отправлена)!!!
---
Как поправить скрипт чтоб клиент мог отправить все 4 формы по очереди ?

function SendPost() // Наша функция, которая будет осуществлять ajax-отправку
{
       jQuery.ajax({	// Начала конструкции для работы с Ajax через jQuery
                type: "GET", // Метод, которым получаем данные из формы
                url: "/send.php", // Обработчик формы. 
                data: jQuery("#form").serialize(), // Этот метод, берет форму с id=form и достает оттуда данные
                success: function(html) {	// функция выполняемая при успешном отправлении данных
					jQuery(".wrapper-form").empty();	// очищаем тело документа
					jQuery(".wrapper-form").append("<h3 style='color:red;'><center>Спасибо! Ваша заявка принята в работу. Скоро мы с Вами свяжемся.</center></h3>"); // вставляем сообщение об успехе
                }
        });
         
}

<form action="/send.php" id="form" method="GET" >
       
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
                    <div class="wrapper-form">
            <h3 class="black">Получить <span class="yellow" style="       color: rgb(208, 50, 50)!important;">Консультацию</span></h3>
            <input type="text" name="name" placeholder="Введите имя" required="">
            <input type="text" name="tel" placeholder="Введите телефон" required="">
            <input type="text" name="mal" placeholder="Введите почту" >
            <input type="hidden" name="kak" value="ФОрма обратной связи над футером (красная полоса)" >

             <input type="button" class="btn btn-default btn_form" value="Отправить" onclick="SendPost();" style=" background: #D03232;
" > 
            <div class="politika"> <a href="">Я согласен с правила обработки данных</a> <a href="">Политика конфиденциальности</a> </div>

           </div>
        </form>

----
Одна форма отправляет все супер - но как сделать чтоб таких было три гштуки на странице ?

Answer 1

[Павел Быков]

Ну думаю что всем формам на div wrapper-form надо дать разный id так же использовать либо аргумент на методе sendPost для определения какая это форма, либо юзать несколько методов, и там где в аяксе метод success надо обращаться именно по id того div для отображения того что все успешно сделано

Answer 2

[leni_m]

jQuery(".wrapper-form").append("<h3 style='color:red;'><center>Спасибо! Ваша заявка принята в работу. Скоро мы с Вами свяжемся.</center></h3>");

после отправки отрабатывает этот код.
Значит у всех ваших форм есть класс "wrapper-form".
Либо сделайте в каждой форме уникальный wrapper, либо можно сделать правильно и обойтись одной функцией для всех форм, например:

function SendPost(form) // Наша функция, которая будет осуществлять ajax-отправку
{
       jQuery.ajax({	// Начала конструкции для работы с Ajax через jQuery
                type: "GET", // Метод, которым получаем данные из формы
                url: form.attr('action'), // Обработчик формы. 
                data: form.serialize(), // Этот метод, берет форму с id=form и достает оттуда данные
                success: function(html) {	// функция выполняемая при успешном отправлении данных
                    form.find(".wrapper-form").empty().append("<h3 style='color:red;'><center>Спасибо! Ваша заявка принята в работу. Скоро мы с Вами свяжемся.</center></h3>"); // вставляем сообщение об успехе
                }
        });
         
}

и вешать событие так

$('form').on('submit', function(){
    SendPost($(this)); // и тогда при отправке любой формы, в функцию будет попадать именно та 
    // форма, которую отправили
});

постараюсь объяснить, что такое $(this) на одном примере:

$(".el").on('click', function() { // по клику на класс "el" все элементы с этим классом очистятся
    $(".el").empty();
});
$(".el").on('click', function() { // по клику на класс "el" только один очистится (по которому click)
    $(this).empty();
});

и так с любым событием.
И еще:

$('.test').empty();
$('.test').append("<div></div>");

тоже самое, что:
$('.test').empty().append("<div></div>");

Comments

[L1nw0od]

я в js не селен ((( могли бы скинуть пример двух форм с хтмл и этим js

[leni_m]

L1nw0od,
если $('.wrapper-form') дочерний элемент формы, то

success: function(html) {	// функция выполняемая при успешном отправлении данных
                    form.find(".wrapper-form").empty().append("<h3 style='color:red;'><center>Спасибо! Ваша заявка принята в работу. Скоро мы с Вами свяжемся.</center></h3>"); // вставляем сообщение об успехе
                }

а если родитель, то

success: function(html) {	// функция выполняемая при успешном отправлении данных
                    form.parents(".wrapper-form").empty().append("<h3 style='color:red;'><center>Спасибо! Ваша заявка принята в работу. Скоро мы с Вами свяжемся.</center></h3>"); // вставляем сообщение об успехе
                }

а если ни там, ни там - скиньте вашу структуру, я напишу

[leni_m]

а всё, увидел. И что у вас не получается?
раз мы пишем

...
type: form.attr('method'), 
url: form.attr('action'), 
...

то соответственно в каждой форме должны быть прописаны
<form action="эти значения" method="и эти">

[Ihor Bratukh]

Зачем
form.find(".wrapper-form").empty().append("text");
Если можно сразу
form.find(".wrapper-form").html('text');

[leni_m]

BRAGA96, верно, но считаю лишним такие пустяки, когда тут ТАКОЕ.

[Ihor Bratukh]

Не забудьте сбить стандартное поведение при отправке формы:

$('form').on('submit', function(event) {
	event.preventDefault();
});

Answer 3

[ThunderCat]

в чем вопрос? Ваша функция отправляет конкретно данные формы с идентификатором #form, если вам нужно отправлять другие формы -
1) можно написать 4 разных функции и в каждом прописать форму(плохой вариант)
2) передать ид формы как параметр функции(вариант получше)
3) сделать по уму, отлавливая евент субмита формы и использовать $(this) для сбора данных(бест вэй)