Ajax форма обратной связи?

Question

[filippokk]

Добрый вечер, есть форма обратной связи и есть для нее обработчик:

function submitForm(){
    // Переменные с данными из формы
    var name = $("#name").val();
    var email = $("#email").val();
    var message = $("#message").val();
 
    $.ajax({
        type: "POST",
        url: "php/form-process.php",
        data: "name="+ name + "&email="+ email + "&message="+ message,
        success : function(text){
            if(text == "success"){
                formSuccess();
            }
        }
    });
}
function  formSuccess(){
    $( "#msgSubmit").removeClass( "hidden");
    $( "#contactForm").find('input[type=text], textarea').val('');
}

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

Answer 1

[Максим Тимофеев]

А зачем несколько форм обратной связи на одной странице?
Но можете передать в функцию submitForm id формы, а вместо $("#idинпута").val() использовать #idинпута-idинпута

Comments

[filippokk]

Что, то я запутался. Я попробовал сделать сериализацию формы, как посоветовали ниже, сделал я это так:

$("#contactForm").submit(function(event){
    // cancels the form submission
    event.preventDefault();
    submitForm();
});



$("form").submit(function () {
            var formID = $(this).attr('id'); // Получение ID формы
            var formNm = $('#' + formID);




    $.ajax({
        type: "POST",
        url: "php/form-process.php",
        data: formNm.serialize(),
        success : function(text){
            if(text == "success"){
                formSuccess();
            }
        }
    });
}
function  formSuccess(){
    $( ".msgSubmit").removeClass( "hidden");
    $( ".contactForm").find('input[type=text], textarea').val('');
}

в итоге форма не обрабатывается, а введеные данные уходят строкой в url. Подскажите как мне все таки добить эти формы, ваш метод вообще не понля, точнее вот это: #idинпута-idинпута

[Максим Тимофеев]

filippokk: Даете форме id например "vasya", тогда у инпутов id будут не #name, а "#vasya-name. При клике по кнопке отправить, получаете id и формируете селекторы из которых надо брать данные.

[Максим Тимофеев]

filippokk: А по поводу сериализации, то вот пример blog.ox2.ru/php/ajax-form

[filippokk]

Максим Тимофеев: я с javascript не сильно знаком, поэтому я теперь понял, что вы сказали но как это реализовать именно в коде не знаю, подскажите пожалуйста. Если я вас правельно понял, то сделав это таким образом мне не нужно будет для 7 форм на странице дублировать код? А с сериализацией тоже пока разобраться не могу делаю как написанно, а в итоге только в url получаю и все

[Максим Тимофеев]

filippokk: только в url получаю и все? Это что значит?

[filippokk]

Максим Тимофеев: Получается следующее, код который я выше приводил вам

$("#contactForm").submit(function(event){
    // cancels the form submission
    event.preventDefault();
    submitForm();
});



$("form").submit(function () {
            var formID = $(this).attr('id'); // Получение ID формы
            var formNm = $('#' + formID);




    $.ajax({
        type: "POST",
        url: "php/form-process.php",
        data: formNm.serialize(),
        success : function(text){
            if(text == "success"){
                formSuccess();
            }
        }
    });
}
function  formSuccess(){
    $( ".msgSubmit").removeClass( "hidden");
    $( ".contactForm").find('input[type=text], textarea').val('');
}

после того как я заполняю все поля (их 3) и нажимаю в одной из форм кнопку "Задать вопрос", то страница "как бы обновляется" и к ее url добавляются после ? данные заполненные в форме, но до обработчика на php получается все это не доходит, хотя путь к нему прописан правильно. Вот попробуйте на этой странице сайта заполнить форму.

[Максим Тимофеев]

Правой клавишей в яндекс браузере или хроме, "просмотр кода элемента" -> вкладка сеть, далее нажимаем на кнопку отправить и смотрим. Что ушло, что пришло. Помимо отправки ajax, еще надо и что бы принимащий скрипт все правильно отдавал.