Bootstrap contact form with php and ajax

Question

Everithing worked correctly until my Adobe Dreamweaver crashed. Now forms don't work. I checked everything: 1) ajax (form-scripts.js) is correct 2) php files are correct (each form has it's own php file, example: #contactForm1 has form-process1.php) 3) links are correct

When you try to send any form ajax takes the last one form data in form-scripts.js. But the day before everything worked with this code, I didn't change anything.

When form workes it highlights fields with errors or with no data, gives help messages under field and under submit button. When the form was sent it gives message under submit button.

Cant't find out the error. Site: http://woodartlab.ru/

Appreciate any answers. Thanks.

HTML form example:

                <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="[email protected]" 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

You can only have one(!) implementation for the same function name in the same scope. So you can only have one SubmitForm() function. The last definition is used when SubmitForm() is called, this is why it always executes the code you specified last in your .js file.

The easiest solution would be to name the functions in another way. SubmitContactForm1(), SubmitContactForm2(), ....