Question

在花了很多时间之后，最后我决定在这里发帖。实际上我正在尝试创建单页webapp，因此联系表单通过ajax'。load（）'函数加载：

    $('.formWrap').load('contactForm.html',function(){

加载成功后，我尝试使用ajax进行提交过程，所以我使用了这段代码：

 var form = {
    load: function(){
          $('.formWrap').load('contactForm.html',function(){
            form.formFunc.formBind();
          });
     ***form.click();***
    },
  ****click: function(){
$('html').on("click","#contactSubmitButton",function(e) {
    e.preventDefault();
    form.formFunc.sidebarvalidateForm($(this).attr('data-formId'));
});
   },****
 formFunc: {
formBind: function(){
        $('#sidebarformSuccessMessageWrap').hide();
    $('.sidebarformValidationError').hide();
    $('input[type="text"], input[type="password"], textarea').focus(function(){
        if($(this).val() == $(this).attr('data-dummy')){
            $(this).val('');
        };
    });

    $('input, textarea').blur(function(){
        if($(this).val() == ''){    
            $(this).val($(this).attr('data-dummy'));
        };
    });
},
sidebarsubmitData: function(currentForm, formType){    
    Anu.Config.sidebarformSubmitted = 'true';
    var formInput = $('#' + currentForm).serialize();
    $.post($('#' + currentForm).attr('action'),formInput, function(data){
        $('#' + currentForm).hide();
        $('#sidebarformSuccessMessageWrap').fadeIn(500);
        setTimeout(function(){
            $('#sidebarformSuccessMessageWrap').fadeOut(500);
            $('#successinfo').fadeIn(500);
            $('.contact-form').slideUp("slow", function() {
                $('.contact-form').hide();
            });
        },5000);
    });
},
sidebarvalidateForm: function(currentForm, formType){
    $('.sidebarformValidationError').hide();
    $('.sidebarfieldHasError').removeClass('sidebarfieldHasError');
    $('#' + currentForm + ' .sidebarrequiredField').each(function(i){  
        if($(this).val() == '' || $(this).val() == $(this).attr('data-dummy')){
            $(this).val($(this).attr('data-dummy'));
            $(this).focus();
            $(this).addClass('fieldHasError');
            $('#' + $(this).attr('id') + 'Error').show();
            return false;  
        };
        if($(this).hasClass('sidebarrequiredEmailField')){  
            var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
            var tempField = '#' + $(this).attr('id');
            if(!emailReg.test($(tempField).val())) {
                $(tempField).focus();
                $(tempField).addClass('sidebarfieldHasError');
                $(tempField + 'Error2').show();
                return false;
            };
        };
        if(Anu.Config.sidebarformSubmitted == 'false' && i == $('#' + currentForm + ' .sidebarrequiredField').length - 1){
            Anu.formFunc.sidebarsubmitData(currentForm, formType);
        };  
      });
}
 }
 }

并将此函数称为：

   $(document).ready(form.load);

和表单html（contactForm.html）代码是： [此文件中有6个表单，其中包含不同的FORM ID。但是字段className是相同的。我这里只发布一个表格，其他所有表格都相同]

 <form class="contactForm" id="contactForm" action='contact-send.php' method='post' enctype='multipart/form-data'>
                                        <span class="sidebarformValidationError" id="contactNameFieldError">
                                            <div class="sidebar-small-notification">
                                                <p>Error Sending! Please enter your name!</p>
                                            </div>
                                        </span>             
                                        <span class="sidebarformValidationError" id="contactEmailFieldError">
                                            <div class="sidebar-small-notification">
                                                <p>Error Sending! Mail address required!</p>
                                            </div>
                                        </span> 
                                        <span class="sidebarformValidationError" id="contactEmailFieldError2">
                                            <div class="sidebar-small-notification">
                                                <p>Error Sending! Valid Email Address Required</p>
                                            </div>
                                        </span> 
                                       <span class="sidebarformValidationError" id="contactSubjectFieldError">
                                            <div class="sidebar-small-notification">
                                                <p>Error Sending! Subject field is empty!</p>
                                            </div>
                                        </span> 
                                        <span class="sidebarformValidationError" id="contactMessageTextareaError">
                                            <div class="sidebar-small-notification">
                                                <p>Error Sending! Message field is empty!</p>
                                            </div>
                                        </span> 
                        <input type="text" class="sidebar-input required sidebarrequiredField first" autocomplete="off" placeholder="Name" required name="contactNameField" id="contactNameField" /><span class="clear-input"></span>
                        <input type="text" class="sidebar-input sidebarrequiredEmailField required sidebarrequiredField" placeholder="Email" required name="contactEmailField" id="contactEmailField" /><span class="clear-input"></span>
                        <input type="text" class="sidebar-input required sidebarrequiredField" placeholder="Subject" required name="contactSubjectField" id="contactSubjectField" /><span class="clear-input"></span>
                        <textarea class="sidebar-textarea required sidebarrequiredField last" required placeholder="Enter Your message Here" name="contactMessageTextarea" id="contactMessageTextarea"></textarea><span class="clear-area"></span>
                        <input type="submit" value="Submit" class="sidebar-button" id="contactSubmitButton" data-formId="contactForm"/>
                    </form>

现在。使用此代码，我无法提交表单数据。当所有字段都被填充并且单击提交按钮时，而不是在提交数据的位置，它显示第一个字段验证错误消息。我认为这个问题的根源是：拥有多个具有相同className字段的表单。因此，当我按下提交按钮时，它会检查其他表单中的相同字段。

比我的实际问题是：如果表单是通过ajax加载并且有多个表单（联系人，查询，投诉，其他等），我如何使用ajax提交表单数据。

谢谢和Regrads

Answer 1

您可以使用表单。用数据填写表单。并使用jQuery通过$("form").submit

发送数据

如果表单也通过ajax加载并且ajax加载的文件有多个表单，如何通过ajax提交表单数据？

1 个答案: