Bootstrap Kontaktformular mit PHP und Ajax

-1

Everithing funktionierte korrekt, bis mein Adobe Dreamweaver abgestürzt ist. Jetzt funktionieren Formulare nicht. Ich habe alles überprüft: 1) ajax (form-scripts.js) ist korrekt 2) PHP-Dateien sind korrekt (jedes Formular hat seine eigene PHP-Datei, Beispiel: # contactForm1 hat form-process1.php) 3) Links sind korrektBootstrap Kontaktformular mit PHP und Ajax

Wenn Sie versuchen, ein Formular zu senden, übernimmt ajax die letzten Formulardaten in form-scripts.js. Aber am Tag zuvor hat alles mit diesem Code funktioniert, ich habe nichts geändert.

Wenn das Formular funktioniert, markiert es Felder mit Fehlern oder ohne Daten, gibt Hilfemeldungen unter Feld und unter Senden. Wenn das Formular gesendet wurde, gibt es eine Nachricht unter Senden Schaltfläche.

Ich kann den Fehler nicht finden. Standort: http://woodartlab.ru/

Schätzen Sie alle Antworten. Vielen Dank.

HTML-Formular Beispiel:

   <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); 
 
}

Quelle

2016-04-13 Julia Sneg

Können Sie Ihren Code anzeigen? –

Ich denke, Sie haben die gleiche ID für jedes Formular. Bitte posten Sie Ihren Code? –

Jedes Formular hat seine eigene ID und eine eigene PHP-Datei. –

Sie nur eine haben kann Implementierung für (!) das gleicher Funktionsname im selben Umfang. Sie können also nur eine SubmitForm() Funktion haben. Die letzte Definition wird verwendet, wenn SubmitForm() aufgerufen wird. Aus diesem Grund führt sie immer den Code aus, den Sie zuletzt in Ihrer JS-Datei angegeben haben.

Die einfachste Lösung wäre, die Funktionen anders zu benennen. SubmitContactForm1(), SubmitContactForm2(), ....

Quelle

2016-04-13 12:06:21

Bootstrap Kontaktformular mit PHP und Ajax

Antwort

Verwandte Themen