Показать сообщение отдельно
  #1 (permalink)  
Старый 19.10.2014, 12:20
Новичок на форуме
Отправить личное сообщение для varanika Посмотреть профиль Найти все сообщения от varanika
 
Регистрация: 19.10.2014
Сообщений: 4

Четыре одинаковые формы на странице с разной версткой
Прошу помощи в вопросе отправки нескольких форм.
Суть такова - одностраничник с 4 разными по виду, но идентичными по сути формами.
Задачи - все формы должны работать.
Я их крутила уже как могла, всем задала разные имена и классы. Валидация у всех работает без проблем, а вот отправляется только 1 форма и все тут.
Использую такую конструкцию по примеру с http://habrahabr.ru/sandbox/68000/


Вот тот ужас, что я свершила путем копирования и клонирования:
function ajax() { //Ajax отправка формы
    var msg = $("#form").serialize();
    $.ajax({
        type: "POST",
        url: "./send.php",
        data: msg,
        success: function(data) {
            $("#results").html(data);
        },
        error:  function(xhr, str){
            alert("Возникла ошибка!");
        }
    });
}
function ajax() { //Ajax отправка формы
    var msg = $("#formkonsult").serialize();
    $.ajax({
        type: "POST",
        url: "./send2.php",
        data: msg,
        success: function(data) {
            $("#results2").html(data);
        },
        error:  function(xhr, str){
            alert("Возникла ошибка!");
        }
    });
}
function ajax() { //Ajax отправка формы
    var msg = $("#formprice").serialize();
    $.ajax({
        type: "POST",
        url: "./price.php",
        data: msg,
        success: function(data) {
            $("#resultsf").html(data);
        },
        error:  function(xhr, str){
            alert("Возникла ошибка!");
        }
    });
}

function ajax() { //Ajax отправка формы
    var msg = $("#form-okno").serialize();
    $.ajax({
        type: "POST",
        url: "./call.php",
        data: msg,
        success: function(data) {
            $("#results-okno").html(data);
        },
        error:  function(xhr, str){
            alert("Возникла ошибка!");
        }
    });
}




И ВАЛИДАЦИЯ, ДЛЯ ПРИМЕРА 1 РАЗ (РАБОТАЕТ ВСЯ - 4 РАЗА)


$(document).ready(function(){ //Валидация формы
    $(".send2").validation(
        $(".name2").validate({
            test: "blank letters",
            invalid: function(){
                if($(this).nextAll(".error").notExists()) {
                    $(this).after('<div id="error4" class="error">Введите корректное имя</div>');
                    $(this).nextAll(".error").delay(2000).fadeOut("slow");
                    setTimeout(function () {
                        $(".name2").next(".error").remove();
                    }, 2600);
                }
            },
            valid: function(){
                $(this).nextAll(".error").remove();
            }
        }),
        $(".email2").validate({
            test: "blank email",
            invalid: function(){
                if($(this).nextAll(".error").notExists()) {
                    $(this).after('<div id="error6" class="error">Введите корректный e-mail</div>');
                    $(this).nextAll(".error").delay(2000).fadeOut("slow");
                    setTimeout(function () {
                        $(".email2").next(".error").remove();
                    }, 2600);
                }
            },
            valid: function(){
                $(this).nextAll(".error").remove();
            }
        }),
        $(".subject2").validate({
            test: "blank digits",
            invalid: function(){
                if($(this).nextAll(".error").notExists()) {
                    $(this).after('<div id="error5" class="error">Введите номер телефона</div>');
                    $(this).nextAll(".error").delay(2000).fadeOut("slow");
                    setTimeout(function () {
                        $(".subject2").next(".error").remove();
                    }, 2600);
                }
            },
            valid: function(){
                $(this).nextAll(".error").remove();
            }
        })
    );
});



Php не привожу - оно отрабатывает отлично, благо с этим языком у нас отношения сложились лучше.

Вот html

<div class="form-stat">
            <form id="form" method="post" action="javascript:void(0);" onsubmit="ajax()">
                <input id="yslovia-form1" type="text" name="name" class="name"  placeholder="ВАШЕ ИМЯ">
                <input id="yslovia-form2" type="text" name="subject" class="subject"  placeholder="ТЕЛЕФОН*">
                <input id="yslovia-form3" type="text" name="email" class="email"  placeholder="E-MAIL*">
                <input id="yslovia-form4" class="send button2" name="send" type="submit" value="">
            </form>
                       <div id="results"></div>


 <form id="formprice" method="post" action="javascript:void(0);" onsubmit="ajax()">
    <input id="price-form1" type="text" name="namef" class="namef" placeholder="ВАШЕ ИМЯ">
    <input id="price-form3" type="text" name="subjectf" class="subjectf" placeholder="ТЕЛЕФОН*">
    <input id="price-form2" type="text" name="emailf" class="emailf" placeholder="E-MAIL*">
    <input id="price-form4" class="sendf button7" name="sendf" type="submit" value="">
    </form>
    <div id="resultsf"></div>



и так далее...

Единственное, пожалуйста, результат (ответ сервера) должен носить разные имена. Т.е. results1, results2, results3, results4. Так как ответ (по верстке) должен писаться либо над формой, либо под ней - разный айди - разные стили у каждого блока.


Я уже голову сломала... Может кто знает решение?
Ответить с цитированием