Question

Everithing工作正常，直到我的Adobe Dreamweaver崩溃。现在表格不起作用。我查了一切： 1）ajax（form-scripts.js）是正确的 2）php文件是正确的（每个表单都有自己的php文件，例如：#contactForm1有form-process1.php） 3）链接是正确的

当您尝试发送任何表单时，ajax会在form-scripts.js中获取最后一个表单数据。但是在使用这段代码的前一天，我没有改变任何东西。

当表单工作时，它突出显示有错误或没有数据的字段，在字段和提交按钮下提供帮助消息。表单发送后，它会在提交按钮下显示消息。

无法找出错误。网站：http://woodartlab.ru/

感谢任何答案。感谢。

HTML表单示例：

                <form role="form" id="contactForm4" method="post" enctype="multipart/form-data" data-toggle="validator">
                    <div class="row">
                        <div class="form-group-lg col-sm-12">
                            <label for="name">Ваше имя:</label>
                            <input type="text" class="form-control" id="name4" name="name4" placeholder="Имя" minlength="2" maxlength="30" required data-error="Как мы можем к вам обратиться?" >
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group-lg col-sm-12">
                            <label for="tel">Ваш контактный телефон:</label>
                            <input type="tel" class="form-control" id="phone4" name="phone4" placeholder="+7 (XXX) XXX-XX-XX"  required data-error="На какой номер вам можно перезвонить?">
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group-lg col-sm-12">
                            <label for="email">Email адрес:</label>
                            <input type="email" class="form-control" id="email4" name="email4" placeholder="address@domen.ru" required data-error="На какой EMAIL отправить варианты макета?">
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group-lg col-sm-12">
                                <label for="styles4" class="control-label">Стиль обработки:</label>
                                <select class="form-control" id="styles4" name="styles4">
                                  <option value="Постер">Постер</option>
                                  <option value="Исторический портрет">Исторический портрет</option>
                                  <option value="Цветокоррекция и фильтры">Цветокоррекция и фильтры</option>
                                  <option value="Коллаж">Коллаж</option>
                                  <option value="Модульная картина">Модульная картина</option>
                                </select>          
                        </div>                           
                        <div class="form-group-lg col-sm-12">
                                <label for="sizes4" class="control-label">Размер:</label>
                                <select class="form-control" id="sizes4" name="sizes4">
                                    <optgroup label="Квадратные:">
                                          <option value="10x10">10x10</option>
                                          <option value="15x15">15x15</option>
                                          <option value="20x20">20x20</option>
                                          <option value="25x25">25x25</option>
                                          <option value="30x30" >30x30</option>
                                    </optgroup> 
                                    <optgroup label="Прямоугольные:">
                                          <option value="10x10">10x15</option>
                                          <option value="15x20">15x20</option>
                                          <option value="15x25">15x25</option>
                                          <option value="15x30">15x30</option>
                                          <option value="15x40">15x40</option>
                                          <option value="15x45">15x45</option>
                                          <option value="20x25">20x25</option>
                                          <option value="20x30">20x30</option>
                                          <option value="20x40">20x40</option>
                                          <option value="20x45">20x45</option>
                                          <option value="25x30">25x30</option>
                                          <option value="25x40">25x40</option>
                                          <option value="20x45">20x45</option>
                                          <option value="30x35">30x35</option>
                                          <option value="30x45">30x45</option>
                                    </optgroup>  
                                    <optgroup label="Составные/Модульные:">
                                          <option value="Модульная/Составная - 3 шт.">3 шт.</option>
                                          <option value="Модульная/Составная - 4 шт.">4 шт.</option>
                                          <option value="Модульная/Составная - 5 шт.">5 шт.</option>
                                          <option value="Модульная/Составная - 6 шт.">6 шт.</option>
                                          <option value="Модульная/Составная - 7 шт.">7 шт.</option>
                                          <option value="Модульная/Составная - 8 шт.">8 шт.</option>
                                          <option value="Модульная/Составная - более 8 шт.">более 8 шт.</option>
                                    </optgroup>                                  
                                </select>          
                        </div>                           
                    </div>
                        <div class="form-group-lg col-sm-12">
                        <p class="small">Мы не передаем ваши контактные данные третьим лицам. Соблюдаем Политику конфиденциальности персональных данных.</p>
                        </div>
                        <div class="form-group-lg col-sm-12">
                         <button type="submit" id="form-submit4" class="btn btn-primary  bg-block btn-lg">Отправить заявку</button>
                         </div>
                    <div id="msgSubmit4" class=" text-center hidden"></div>
                    <div class="clearfix"></div>
                </form>

form-scripts.js：

//ФОРМА ПЕРВОГО ЭКРАНА//

$("#contactForm").validator().on("submit", function (event) {
    if (event.isDefaultPrevented()) {
        // handle the invalid form...
        formError();
        submitMSG(false, "Проверьте поля ввода.");
    } else {
        // everything looks good!
        event.preventDefault();
        submitForm();
    }
});

function submitForm(){
    // Initiate Variables With Form Content
    var name = $("#name").val();
    var phone = $("#phone").val();
    var email = $("#email").val();

    $.ajax({
        type: "POST",
        url: "php/form-process.php",
        data: "name=" + name + "&phone=" + phone + "&email=" + email,
        success : function(text){
            if (text == "success"){
                formSuccess();
            } else {
                formError();
                submitMSG(false,text);
            }
        }
    });
}

function formSuccess(){
    $("#contactForm")[0].reset();
    submitMSG(true, "Сообщение отправлено!")
}

function formError(){
    $("#contactForm").removeClass().addClass('bounce animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
        $(this).removeClass();
    });
}

function submitMSG(valid, msg){
    if(valid){
        var msgClasses = "h3 text-center tada animated text-success";
    } else {
        var msgClasses = "h3 text-center text-danger";
    }
    $("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
}


//ФОРМА ОБРАТНОГО ЗВОНКА//

$("#contactForm1").validator().on("submit", function (event) {
    if (event.isDefaultPrevented()) {
        // handle the invalid form...
        formError();
        submitMSG(false, "Проверьте поле ввода.");
    } else {
        // everything looks good!
        event.preventDefault();
        submitForm();
    }
});

function submitForm(){
    // Initiate Variables With Form Content
    var phone1 = $("#phone1").val();

    $.ajax({
        type: "POST",
        url: "php/form-process1.php",
        data:  "&phone1=" + phone1,
        success : function(text){
            if (text == "success"){
                formSuccess();
            } else {
                formError();
                submitMSG(false,text);
            }
        }
    });
}

function formSuccess(){
    $("#contactForm1")[0].reset();
    submitMSG(true, "Сообщение отправлено!")
}

function formError(){
    $("#contactForm1").removeClass().addClass('bounce animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
        $(this).removeClass();
    });
}

function submitMSG(valid, msg){
    if(valid){
        var msgClasses = "text-center slideInUp animated text-success";
    } else {
        var msgClasses = "text-center text-danger";
    }
    $("#msgSubmit1").removeClass().addClass(msgClasses).text(msg);
}



//ФОРМА ЗАЯВКИ ИЗ БЛОКА СТИЛИ//
$("#contactForm2").validator().on("submit", function (event) {
    if (event.isDefaultPrevented()) {
        // handle the invalid form...
        formError();
        submitMSG(false, "Проверьте поля ввода.");
    } else {
        // everything looks good!
        event.preventDefault();
        submitForm();
    }
});

function submitForm(){
    // Initiate Variables With Form Content
    var name2 = $("#name2").val();
    var phone2 = $("#phone2").val();
    var email2 = $("#email2").val();
    var styles2 = $("#styles2").val();

    $.ajax({
        type: "POST",
        url: "php/form-process2.php",
        data: "name2=" + name2 + "&phone2=" + phone2 + "&email2=" + email2 + "&styles2=" + styles2,
        success : function(text){
            if (text == "success"){
                formSuccess();
            } else {
                formError();
                submitMSG(false,text);
            }
        }
    });
}

function formSuccess(){
    $("#contactForm2")[0].reset();
    submitMSG(true, "Сообщение отправлено!")
}

function formError(){
    $("#contactForm2").removeClass().addClass('bounce animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
        $(this).removeClass();
    });
}

function submitMSG(valid, msg){
    if(valid){
        var msgClasses = "text-center slideInUp animated text-success";
    } else {
        var msgClasses = "text-center text-danger";
    }
    $("#msgSubmit2").removeClass().addClass(msgClasses).text(msg);
}




//ФОРМА ПОДПИСКИ//

$("#contactForm3").validator().on("submit", function (event) {
    if (event.isDefaultPrevented()) {
        // handle the invalid form...
        formError();
        submitMSG(false, "Проверьте поле ввода.");
    } else {
        // everything looks good!
        event.preventDefault();
        submitForm();
    }
});

function submitForm(){
    // Initiate Variables With Form Content
    var email3 = $("#email3").val();

    $.ajax({
        type: "POST",
        url: "php/form-process3.php",
        data:  "&email3=" + email3,
        success : function(text){
            if (text == "success"){
                formSuccess();
            } else {
                formError();
                submitMSG(false,text);
            }
        }
    });
}

function formSuccess(){
    $("#contactForm3")[0].reset();
    submitMSG(true, "Сообщение отправлено!")
}

function formError(){
    $("#contactForm3").removeClass().addClass('bounce animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
        $(this).removeClass();
    });
}

function submitMSG(valid, msg){
    if(valid){
        var msgClasses = "text-center slideInUp animated text-success";
    } else {
        var msgClasses = "text-center text-danger";
    }
    $("#msgSubmit3").removeClass().addClass(msgClasses).text(msg);
}




//ФОРМА ЗАЯВКИ ИЗ БЛОКА РАЗМЕРЫ

$("#contactForm4").validator().on("submit", function (event) {
    if (event.isDefaultPrevented()) {
        // handle the invalid form...
        formError();
        submitMSG(false, "Проверьте поля ввода.");
    } else {
        // everything looks good!
        event.preventDefault();
        submitForm();
    }
});

function submitForm(){
    // Initiate Variables With Form Content
    var name4 = $("#name4").val();
    var phone4 = $("#phone4").val();
    var email4 = $("#email4").val();
    var styles4 = $("#styles4").val();
    var sizes4 = $("#sizes4").val();

    $.ajax({
        type: "POST",
        url: "php/form-process4.php",
        data: "name4=" + name4 + "&phone4=" + phone4 + "&email4=" + email4 + "&styles4=" + styles4 + "&sizes4=" + sizes4,
        success : function(text){
            if (text == "success"){
                formSuccess();
            } else {
                formError();
                submitMSG(false,text);
            }
        }
    });
}

function formSuccess(){
    $("#contactForm4")[0].reset();
    submitMSG(true, "Сообщение отправлено!")
}

function formError(){
    $("#contactForm4").removeClass().addClass('bounce animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
        $(this).removeClass();
    });
}

function submitMSG(valid, msg){
    if(valid){
        var msgClasses = "h5 text-center slideInUp animated text-success";
    } else {
        var msgClasses = "h5 text-center text-danger";
    }
    $("#msgSubmit4").removeClass().addClass(msgClasses).text(msg);
}

Answer 1

在同一范围内，您只能对同一个函数名实现一个（！）实现。所以你只能有一个SubmitForm（）函数。在调用SubmitForm（）时使用最后一个定义，这就是它始终执行您在.js文件中最后指定的代码的原因。

最简单的解决方案是以另一种方式命名功能。 SubmitContactForm1（），SubmitContactForm2（），....

使用php和ajax

1 个答案: