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)));