AJAX/PHPを使用して同じページに2つのフォームを作成する

Question

同じページ（ブートストラップモーダル）で2つのフォームにAJAX/PHPを使用しています。私はこれについて間違った方法をとっているかもしれませんが、POST情報を取得する2つの別々のファイルがあります。私はすべての変数とIDを変更しました。

最初のフォームは期待どおりに動作します。電子メールを送信して、フォームの下部にある「Message Submitted」というユーザーに通知します。 2番目の形式では電子メールは送信されますが、受信したフィードバックは表示されません。

問題は機能submitMSGのようです - 最初のフォームで動作し、2番目のフォームでは何もしません。

私はここに2つの.jsファイルを投稿します。うまくいけば、誰かが私が間違っていたことを知っています。ありがとう！

ビジネスフォームスクリプト

$("#businessForm").validator().on("submit", function (event) { 
if (event.isDefaultPrevented()) { 
    // handle the invalid form... 
    formError(); 
    submitMSG(false, "Did you fill in the form properly?"); 
} else { 
    // everything looks good! 
    event.preventDefault(); 
    submitFormBusiness(); 
} 
}); 


function submitFormBusiness(){ 
// Initiate Variables With Form Content 
var yourNameBusiness = $("#yourNameBusiness").val(); 
var yourEmailBusiness = $("#yourEmailBusiness").val(); 
var yourPhoneBusiness = $("#yourPhoneBusiness").val(); 
var yourStreetBusiness = $("#yourStreetBusiness").val(); 
var yourCityBusiness = $("#yourCityBusiness").val(); 
var yourStateBusiness = $("#yourStateBusiness").val(); 
var yourZipBusiness = $("#yourZipBusiness").val(); 
var accountBusiness = $("#accountBusiness").val(); 
var otherNameBusiness = $("#otherNameBusiness").val(); 
var otherBusinessBusiness = $("#otherBusinessBusiness").val(); 
var otherEmailBusiness = $("#otherEmailBusiness").val(); 
var otherPhoneBusiness = $("#otherPhoneBusiness").val(); 
var otherStreetBusiness = $("#otherStreetBusiness").val(); 
var otherCityBusiness = $("#otherCityBusiness").val(); 
var otherStateBusiness = $("#otherStateBusiness").val(); 
var otherZipBusiness = $("#otherZipBusiness").val(); 
var humanBusiness = $("#humanBusiness").val(); 

$.ajax({ 
    type: "POST", 
    url: "form-process-refer-a-business.php", 
    data: "&yourNameBusiness=" + yourNameBusiness + "&yourEmailBusiness=" + yourEmailBusiness + "&yourPhoneBusiness=" + yourPhoneBusiness + "&yourStreetBusiness=" + yourStreetBusiness + "&yourCityBusiness=" + yourCityBusiness + "&yourStateBusiness=" + yourStateBusiness + "&yourZipBusiness=" + yourZipBusiness + "&accountBusiness=" + accountBusiness + "&otherNameBusiness=" + otherNameBusiness + "&otherBusinessBusiness=" + otherBusinessBusiness + "&otherEmailBusiness=" + otherEmailBusiness + "&otherPhoneBusiness=" + otherPhoneBusiness + "&otherStreetBusiness=" + otherStreetBusiness + "&otherCityBusiness=" + otherCityBusiness + "&otherStateBusiness=" + otherStateBusiness + "&otherZipBusiness=" + otherZipBusiness + "&humanBusiness=" + humanBusiness, 
    success : function(text){ 
     if (text == "success"){ 
      formSuccess(); 
     } else { 
      formError(); 
      submitMSG(false,text); 
     } 
    } 
}); 
} 

function formSuccess(){ 
$("#businessForm")[0].reset(); 
submitMSG(true, "Message Submitted!"); 
} 

function formError(){ 
$("#businessForm").removeClass().addClass('shake 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"; 
} 
$("#businessSubmitMsg").removeClass().addClass(msgClasses).text(msg); 
} 

フレンズスクリプト

$("#friendForm").validator().on("submit", function (event) { 
if (event.isDefaultPrevented()) { 
    // handle the invalid form... 
    formError(); 
    submitMSG(false, "Did you fill in the form properly?"); 
} else { 
    // everything looks good! 
    event.preventDefault(); 
    submitFormFriend(); 
} 
}); 

function submitFormFriend(){ 
// Initiate Variables With Form Content 
var yourNameFriend = $("#yourNameFriend").val(); 
var yourBusinessFriend = $("#yourBusinessFriend").val(); 
var yourEmailFriend = $("#yourEmailFriend").val(); 
var yourPhoneFriend = $("#yourPhoneFriend").val(); 
var yourStreetFriend = $("#yourStreetFriend").val(); 
var yourCityFriend = $("#yourCityFriend").val(); 
var yourStateFriend = $("#yourStateFriend").val(); 
var yourZipFriend = $("#yourZipFriend").val(); 
var accountFriend = $("#accountFriend").val(); 
var otherNameFriend = $("#otherNameFriend").val(); 
var otherBusinessFriend = $("#otherBusinessFriend").val(); 
var otherEmailFriend = $("#otherEmailFriend").val(); 
var otherPhoneFriend = $("#otherPhoneFriend").val(); 
var otherStreetFriend = $("#otherStreetFriend").val(); 
var otherCityFriend = $("#otherCityFriend").val(); 
var otherStateFriend = $("#otherStateFriend").val(); 
var otherZipFriend = $("#otherZipFriend").val(); 
var humanFriend = $("#humanFriend").val(); 

$.ajax({ 
    type: "POST", 
    url: "form-process-refer-a-friend.php", 
    data: "&yourNameFriend=" + yourNameFriend + "&yourBusinessFriend=" + yourBusinessFriend + "&yourEmailFriend=" + yourEmailFriend + "&yourPhoneFriend=" + yourPhoneFriend + "&yourStreetFriend=" + yourStreetFriend + "&yourCityFriend=" + yourCityFriend + "&yourStateFriend=" + yourStateFriend + "&yourZipFriend=" + yourZipFriend + "&accountFriend=" + accountFriend + "&otherNameFriend=" + otherNameFriend + "&otherBusinessFriend=" + otherBusinessFriend + "&otherEmailFriend=" + otherEmailFriend + "&otherPhoneFriend=" + otherPhoneFriend + "&otherStreetFriend=" + otherStreetFriend + "&otherCityFriend=" + otherCityFriend + "&otherStateFriend=" + otherStateFriend + "&otherZipFriend=" + otherZipFriend + "&humanFriend=" + humanFriend, 
    success : function(text){ 
     if (text == "success"){ 
      formSuccess(); 
     } else { 
      formError(); 
      submitMSG(false,text); 
     } 
    } 
}); 
} 

function formSuccess(){ 
$("#friendForm")[0].reset(); 
submitMSG(true, "Message Submitted!"); 
} 

function formError(){ 
$("#friendForm").removeClass().addClass('shake 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"; 
} 
$("#friendSubmitMsg").removeClass().addClass(msgClasses).text(msg); 
} 

Answer 1

を形成する問題は、（u_mulderが述べたように）関数submitMSGがすでに定義されていることで、友人のフォームが送信されたときに、最初のsubmitMSG機能使用されている。したがって、メッセージは#bussinessFormフォームの一番下に表示されるはずです。あなたが言及したように、各フォームが異なる関数名を持つようにsubmitMSG関数の名前を変更すると動作するはずです。

これを解決するための別の方法は、各機能は、例えば、それに渡された要素でそのアクションを実行するように機能して一緒にフォーム要素を渡すことです：

$('.msg-form').validator().on('submit', function (event) { 
    var self = $(this); 

    if (event.isDefaultPrevented()) { 
     // handle the invalid form... 
     formError(self, "Did you fill in the form properly?"); 
    } else { 
     // everything looks good! 
     event.preventDefault(); 
     submitMessageForm(self); 
    } 
}); 

function submitMessageForm (form) { 
    var data = new FormData(); 

    form.find('.input-field').each(function() { 
     data.append($(this).attr('name'), $(this).val()); 
     //or you could define a var 'params' outside the 
     //loop and add the params like 
     //var params += $(this).attr('name') + '=' + $(this).val() + '&'; 
     //Just remember to remove the last & afterwards 
    }); 

    var url = form.attr('action'); 

    $.ajax({ 
     type: "POST", 
     url: url, 
     data: data, 
     success : function(text){ 
      if (text == "success"){ 
       formSuccess(form, "Message Submitted!"); 
      } else { 
       formError(form, text); 
      } 
     } 
    }); 
} 

function formSuccess(form, message){ 
    form[0].reset(); 
    submitMSG(form, true, message); 
} 

function formError(form, message){ 
    form.removeClass().addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ 
     $(this).removeClass(); 
    }); 

    submitMSG(form, false, message); 
} 

function submitMSG(form, valid, msg){ 
    if(valid){ 
     var msgClasses = "h3 text-center tada animated text-success"; 
    } else { 
     var msgClasses = "h3 text-center text-danger"; 
    } 
    form.removeClass().addClass(msgClasses).text(msg); 
}`enter code here`