-1
私のAdobe Dreamweaverがクラッシュするまで、Everithingは正しく動作しました。 フォームが機能しません。私はすべてをチェックしました： 1）ajax（form-scripts.js）は正しいです 2）phpファイルは正しいです（それぞれのフォームには独自のPHPファイルがあります）#contact1はform-process1.phpを持っています 3）phpとajaxを使用したブートストラップの連絡フォーム
フォームを送信しようとすると、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="[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>フォーム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);
}
コードを表示できますか？ –
あなたはそれぞれのフォームに同じIDを持っていると思います。あなたのコードを投稿してください –
各フォームには独自のIDと独自のPHPファイルがあります。 –