Question

我在同一页面上使用AJAX / PHP 2个表单（在Bootstrap模式中）。我可能会以错误的方式解决这个问题，但我有2个单独的文件来检索POST信息。我改变了所有的变量和id。

第一个表单按预期工作 - 发送一封电子邮件并告诉用户＆＃34; Message Submitted＆＃34;在表格的底部。第二种形式发送电子邮件，但没有向用户提供收到的任何反馈，如果不是，则给他们一个错误。

似乎问题是函数submitMSG - 在第一个表单上工作，在第二个表单上什么都不做。

我要在这里发布我的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

问题是函数submitMSG已经定义（如提到的u_mulder），并且当提交朋友表单时，首先使用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`

使用AJAX / PHP在同一页面上形成2个表单

1 个答案: