Ajax表单 - 在同一页面上从所有表单提交

Question

我在同一页上有两个表单的页面。这两种形式基于视口显示（响应式设计/媒体查询CSS）。

在页面上，我使用bootstrapvalidator来验证字段，并通过Ajax为了在没有浏览器重新加载的情况下提交表单。因为bootstrapvalidator的，Ajax代码看起来是这样的 - 即针对所有形式的代码：

$('form').on('success.form.bv', function(e) { 
    var thisForm = $(this); 

    //Prevent the default form action 
    e.preventDefault(); 

    //Hide the form 
    $(this).fadeOut(function() { 
     //Display the "loading" message 
     $(".loading").fadeIn(function() { 
     //Post the form to the send script 
     $.ajax({ 
      type: 'POST', 
      url: thisForm.attr("action"), 
      data: thisForm.serialize(), 
      //Wait for a successful response 
      success: function(data) { 
      //Hide the "loading" message 
      $(".loading").fadeOut(function() { 
       //Display the "success" message 
       $(".success").text(data).fadeIn(); 
      }); 
      } 
     }); 
     }); 
    }); 

这段代码的问题，因为它似乎是一个事实，即代码将发送两封邮件，一个用于可见的形式，一个隐藏的移动/选项卡形式 - 成功味精实际上将显示两种形式（当我调整浏览器的目标是台式机和暴民/平板电脑，我可以看到这两种形式的成功味精）。首先，我认为是因为e.preventDefault();有问题，然后我认为问题是由提交按钮的提交名称/编号name conflicts造成的。但是现在我很确定它与这两个表单在同一页面上的存在有关 - 因为我现在解决这个问题的唯一方法就是彻底删除其中的一个表单，这实际上不是解决方案！

我的形式看起来像这样以不同形式ID（html5form/html5formmob）和输入提交ID（暴民/台）：

<form id="html5Form" method="post" action='mail/mail.php' 
      class="form-horizontal" 
      data-bv-message="This value is not valid" 
      data-bv-feedbackicons-valid="glyphicon glyphicon-ok" 
      data-bv-feedbackicons-invalid="glyphicon glyphicon-remove" 
      data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">  

       <div class="form-group"> 
         <label>Name</label> 
         <input class="form-control" type="text" name="name" id="name" 
          data-bv-message="The username is not valid" 
          required data-bv-notempty-message="Please give a name"/> 
       </div> 

       <div class="form-group"> 
        <label>Mail</label> 
         <input class="form-control" name="email" id="email" type="email" required data-bv-emailaddress-message="No valid email" /> 
       </div> 

       <div class="form-group"> 
       <label>Msg</label> 
       <textarea class="form-control" name="message" id="message" rows="7" required 
       data-bv-notempty-message="No empty msg"></textarea> 
       </div> 

       <input type="submit" id="mob" value="Send"/> 
      </form> 
<div class="loading"> 
     Sending msg... 
    </div> 
    <div class="success"> 
    </div> 

所以我的问题，是有办法禁用/启用整个窗体使用CSS或JS？ ..这可能是一个解决方案，或者你有其他建议吗？

Answer 1

试图改变自己的JS部分成这样：

$('form').on('success.form.bv', function(e) { 
    var thisForm = $(this), parent = thisForm.parent(); 

    //Prevent the default form action 
    e.preventDefault(); 

    if (thisForm.is(':visible')) { 
     //Hide the form 
     thisForm.fadeOut(function() { 
     //Display the "loading" message 
     $(".loading", parent).fadeIn(function() { 
      //Post the form to the send script 
      $.ajax({ 
       type: 'POST', 
       url: thisForm.attr("action"), 
       data: thisForm.serialize(), 
       //Wait for a successful response 
       success: function(data) { 
        //Hide the "loading" message 
        $(".loading", parent).fadeOut(function() { 
         //Display the "success" message 
         $(".success", parent).text(data).fadeIn(); 
        }); 
       } 
      }); 
     }); 
    } 
}); 

将动态地工作，所以，即使你通过调整您的浏览器切换形式。

Answer 2

试试下面的办法：

$('form').on('success.form.bv', function(e) { 
var thisForm = $(this); 

//Prevent the default form action 
e.preventDefault(); 

if (getComputedStyle(thisForm[0], null).display != "none") 
{ 
    //Hide the form 
    $(this).fadeOut(function() { 
     //Display the "loading" message 
     $(".loading").fadeIn(function() { 
     //Post the form to the send script 
     $.ajax({ 
      type: 'POST', 
      url: thisForm.attr("action"), 
      data: thisForm.serialize(), 
      //Wait for a successful response 
      success: function(data) { 
      //Hide the "loading" message 
      $(".loading").fadeOut(function() { 
       //Display the "success" message 
       $(".success").text(data).fadeIn(); 
      }); 
      } 
     }); 
     }); 
    }); 
} 
}); 

但是你也可以通过自身验证每个表格：

$('#html5Form') 
    .formValidation({ 
     ... options ... 
    }) 
    .on('success.form.fv', function(e) { ... ajax call ...}); 

，甚至更好。将ajax调用包装成功能

function callAjax(form) 
{ 
     form.fadeOut(function() { 
     //Display the "loading" message 
     $(".loading").fadeIn(function() { 
     //Post the form to the send script 
     $.ajax({ 
      type: 'POST', 
      url: form.attr("action"), 
      data: form.serialize(), 
      //Wait for a successful response 
      success: function(data) { 
      //Hide the "loading" message 
      $(".loading").fadeOut(function() { 
       //Display the "success" message 
       $(".success").text(data).fadeIn(); 
      }); 
      } 
     }); 
     }); 
    }); 
} 


    $('#html5Form') 
    .formValidation({ 
     ... options ... 
    }) 
    .on('success.form.fv', callAjax.bind(null, $(this))); 

    $('#html5formmob') 
    .formValidation({ 
     ... options ... 
    }) 
    .on('success.form.fv', callAjax.bind(null, $(this)));