jquery多個表格

Question

我正在使用jQuery進行驗證，然後AJAX在單個頁面上提交多個表單。用戶每次只能完成一次表單。目前，jQuery只能定位和驗證第一個表單，而我不確定如何調整它以處理其他表單的存在 - 該腳本取自一個可以很好運行的單一環境。我已經看到有關能夠做到這一點的各種帖子，但我無法弄清楚如何將它們應用於我的情況。

<script type="text/javascript"> 
function validateEmail(email) { 
    var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 
    return reg.test(email); 
} 

$(document).ready(function() { 
    $("#contact").submit(function() { return false; });  

    $('a').click(function(e) { 
     $('#product').val($(this).attr('id'));  
     $('#sub').val('I am interested in ' + this.id);  
    });   

    $("#send").on("click", function(){ 
     var emailval = $("#email").val(); 
     var msgval = $("#msg").val(); 
     var msglen = msgval.length; 
     var mailvalid = validateEmail(emailval); 
     var nameval = $("#name").val(); 
     var namelen = nameval.length; 

     if(mailvalid == false) { 
      $("#email").addClass("error"); 
     } 
     else if(mailvalid == true){ 
      $("#email").removeClass("error"); 
     } 

     if(msglen < 4) { 
      $("#msg").addClass("error"); 
     } 
     else if(msglen >= 4){ 
      $("#msg").removeClass("error"); 
     } 

     if(namelen < 1) { 
      $("#name").addClass("error"); 
     } 
     else if(namelen >= 1){ 
      $("#name").removeClass("error"); 
     } 

     if(mailvalid == true && msglen >= 4 && namelen >= 1) { 
      // if both validate we attempt to send the e-mail 
      // first we hide the submit btn so the user doesnt click twice 
      $("#send").replaceWith("<span class=sending>sending...</span>"); 

      $.ajax({ 
       type: 'POST', 
       url: 'rfq.php', 
       data: $("#contact").serialize(), 
       success: function(data) { 
        if(data == "true") { 
         $("#contact").fadeOut("fast", function(){ 
          $(this).before("<span class=success>Success! Your message has been sent.</span>"); 
          setTimeout("$.fancybox.close()", 5000); 
         }); 
        } 
       } 
      }); 
     } 
    }); 
}); 

Answer 1

這裏有一些關於如何做到這一點的想法。我沒有完成它，因爲我沒有時間連接一個表單翻車機來測試它，也沒有時間運行fancybox並創建所有與它相關的html。

它是一個通用的處理程序應該處理多種形式的帶班的「接觸」，它都有一個名字，電子郵件和味精場

一些選擇，你將不得不進行修改，例如我不知道你想要一個發送範圍爲每個表單，所以我認爲你做，並且它是一個形式的兄弟

$(".contact").submit(function() { 
     var form = $(this); 
     var name = form.find("input[name='fullname']"); 
     var email = form.find("input[name='email']"); 
     var msg = form.find("input[name='msg']") 

     var emailval = email.val(); 
     var msgval = msg.val(); 
     var msglen = msgval.length; 
     var mailvalid = validateEmail(emailval); 
     var nameval = name.val(); 
     var namelen = nameval.length; 

     name.toggleClass("error",namelen < 1) 
     email.toggleClass("error",!mailvalid); 
     msg.toggleClass("error",msglen< 4) 

     if (name.hasClass("error") || email.hasClass("error") || msg.hasClasss("error")) return false; 

     form.sibling(".send").replaceWith("<span class=sending>sending...</span>"); 

     $.ajax({ 
      type: 'POST', 
      url: 'rfq.php', 
      data: form.serialize(), 
      success: function(data) { 
      if(data == "true") { 
       $(form).fadeOut("fast", function(){ 
       $(this).before("<span class=success>Success! Your message has been sent.</span>"); 
       setTimeout("$.fancybox.close()", 5000); 
       }); 
      } // if 
      } // success 
     }); // ajax 
     return false; // cancel the submit 
     });