我如何確定哪種形式提交，並使用jquery

Question

處理不同的提交功能我是新來的jQuery，我試圖改變使用jQuery的聯繫人的形式來處理表單驗證現有的頁面模板。如果表單元素有效，它將數據元素提交給處理它的頁面（發送電子郵件）。我想要做的是改變現有的代碼，因爲我有兩個在同一頁面上的其他表單。實質上，一種形式是用於生成聯繫人電子郵件，第二種形式包含用於向PayPal提交捐贈請求的幾個元素，並且第三種形式將類似於聯繫人電子郵件，但將包含一些其他表單元素以提供更多信息比標準的聯繫表格。

有一對夫婦件難題。首先，有一個名爲的script.js文件，該文件包含以下內容：

$(document).ready(function() { 
    // hover 

    $('#menu> li > a strong').css({opacity:0}) 

    $('#menu > li').hover(function(){ 
     $(this).find('> a strong').stop().animate({opacity:1})    
    }, function(){ 
     if (!$(this).hasClass('active')&&!$(this).hasClass('sfHover')) { 
      $(this).find('> a strong').stop().animate({opacity:0})    
     } 
    }) 

    $('.list1 .img_act').css({opacity:0, display:'none'}) 

    $('.list1 li').hover(function(){ 
     $(this).find('.img_act').css({display:'block'}).stop().animate({opacity:1}, function(){$(this).css({opacity:'none'})})       
    }, function(){ 
     $(this).find('.img_act').stop().animate({opacity:0}, function(){$(this).css({display:'none'})})      
    }) 

    $("a[data-type^='prettyPhoto']").prettyPhoto({animation_speed:'normal',theme:'facebook',slideshow:3000, autoplay_slideshow: false}); 
     $('.lightbox-image').hover(function(){ 
      $(this).find('.play').stop().animate({width:71, height:71, marginTop:-35, marginLeft:-35}) 
     }, function(){ 
      $(this).find('.play').stop().animate({width:51, height:51, marginTop:-25, marginLeft:-25}) 
     }) 



    $('ul#menu').superfish({ 
     delay:  600, 
     animation: {height:'show'}, 
     speed:  600, 
     autoArrows: false, 
     dropShadows: false 
    }); 

     //gallery 
    $("#gallery1").jCarouselLite({ 
      btnNext: ".next", 
      btnPrev: ".prev", 
      mouseWheel: true, 
      visible: 3, 
      vertical: true, 
      speed: 600, 
      easing: 'easeOutCirc' 
    }); 

    $('#gallery1 a').hover(function(){ 
     $(this).find('img').stop().animate({opacity:0.7})       
    },function(){ 
     $(this).find('img').stop().animate({opacity:1})       
    }) 


}); 
$(window).load(function() { 
    //bg animate 

    $('#bgStretch').bgStretch({ 
      align:'leftTop', 
      navigs:$('#pagination').navigs() 
     }) 
     .sImg({ 
      spinner:$('.spinner').css({opacity:.7}).hide() 
    }) 

    $('#pagination li').eq(0).addClass('active'); 

    // scroll 
    $('.scroll').cScroll({ 
     duration:700, 
     step:63, 
     trackCl:'track', 
     shuttleCl:'shuttle' 
    }) 

    // contact form 
    $('#ContactForm').forms({ 
     ownerEmail:'#' 
    }) 

     // other form 
    $('#OtherForm').forms({ 
     ownerEmail:'#' 
    }) 

     // contact form 
    $('#DonateForm').forms({ 
     ownerEmail:'#' 
    }) 

     // contact form 
    $('#JoinForm').forms({ 
     ownerEmail:'#' 
    }) 

    //content switch 
    var content=$('#content'), 
     nav=$('.menu'); 
    nav.navs({ 
     useHash:true 
    }) 
    nav.navs(function(n, _){ 
     content.cont_sw(n); 
     $('#menu > li').not('.sfHover').find('>a strong').stop().animate({opacity:0}) 
     if (_.n!=-1) { 
      $('#menu > li').eq(_.n).find('>a strong').stop().animate({opacity:1}) 
     } 
     if (_.n==0) { 
      $('#content').stop().animate({height:310}) 
     } else { 
      $('#content').stop().animate({height:510}) 
     } 
    }) 
    content.cont_sw({ 
     showFu:function(){ 
      var _=this   
      $.when(_.li).then(function(){ 
       _.next.css({display:'block', left:-1500}).stop().animate({left:0},600, function(){ 

       }); 
      }); 
     }, 
     hideFu:function(){ 
      var _=this 
      _.li.stop().animate({left:2000},600, function(){ 
       _.li.css({display:'none'}) 
      }) 
     }, 
     preFu:function(){ 
      var _=this 
      _.li.css({position:'absolute', display:'none'}); 
     } 
    }) 
    nav.navs(0); 

    var h_cont=950; 
    function centre() { 
     var h=$(window).height(); 
     if (h>h_cont) { 
      m_top=~~(h-h_cont)/2+12; 
     } else { 
      m_top=12; 
     } 
     $('#content').stop().animate({marginTop:m_top}) 
    } 
    centre(); 
    $(window).resize(centre); 

}) 

再有就是所謂的forms.js一個單獨的文件，其中包含用於表單驗證和提交的代碼。這就是我正在努力使我的其他兩種形式得到驗證和提交。下面是forms.js的完整代碼（而不是在原來的職位代碼段）：

(function($){ 
    $.fn.extend({ 
     forms:function(opt){ 
      if(opt===undefined) 
       opt={} 
      this.each(function(){ 
       var th=$(this), 
        data=th.data('forms'), 
        _={ 
         errorCl:'error', 
         emptyCl:'empty', 
         invalidCl:'invalid', 
         successCl:'success', 
         successShow:'4000', 
         mailHandlerURL:'bin/MailHandler.php', 
         ownerEmail:'support@guardlex.com', 
         stripHTML:true, 
         smtpMailServer:'localhost', 
         targets:'input,textarea', 
         controls:'a[data-type=reset],a[data-type=submit]', 
         validate:true, 
         rx:{ 
          ".employer":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'}, 
          ".name":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'}, 
          ".state":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'}, 
          ".email":{rx:/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i,target:'input'}, 
          ".phone":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'}, 
          ".fax":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'}, 
          ".message":{rx:/.{20}/,target:'textarea'} 
         }, 
         preFu:function(){ 
          _.labels.each(function(){ 
           var label=$(this), 
            inp=$(_.targets,this), 
            defVal=inp.attr('value'), 
            trueVal=(function(){ 
               var tmp=inp.is('input')?(tmp=label.html().match(/value=['"](.+?)['"].+/),!!tmp&&!!tmp[1]&&tmp[1]):inp.html() 
               return tmp 
              })() 

           trueVal!=defVal 
            &&inp.val(defVal=trueVal||defVal) 
           label.data({defVal:defVal})        
           inp 
            .bind('focus',function(){ 
             inp.val()==defVal 
              &&(inp.val(''),_.hideEmptyFu(label),label.removeClass(_.invalidCl)) 
            }) 
            .bind('blur',function(){ 
             !inp.val() 
              ?inp.val(defVal)           
              :(_.isValid(label) 
               ?_.showErrorFu(label) 
               :_.hideErrorFu(label)), 
              (_.isEmpty(label) 
               ?_.showEmptyFu(label) 
               :_.hideEmptyFu(label)) 
            }) 
            .bind('keyup',function(){ 
             label.hasClass(_.invalidCl) 
              &&_.isValid(label) 
               ?_.showErrorFu(label) 
               :_.hideErrorFu(label) 
            }) 
           label.find('.'+_.errorCl+',.'+_.emptyCl).css({display:'block'}).hide() 
          }) 
          _.success=$('.'+_.successCl,_.form).hide() 
         }, 
         isValid:function(el){ 
          var ret=true, 
           empt=_.isEmpty(el) 
          if(empt) 
           ret=false, 
           el.addClass(_.invalidCl) 
          else 
           $.each(_.rx,function(k,d){ 
            if(el.is(k)) 
             d.rx.test(el.find(d.target).val()) 
              ?(el.removeClass(_.invalidCl),ret=false) 
              :el.addClass(_.invalidCl) 
           }) 
          return ret 
         }, 
         isEmpty:function(el){ 
          var tmp 
          return (tmp=el.find(_.targets).val())==''||tmp==el.data('defVal') 
         }, 
         validateFu:function(){       
          _.labels.each(function(){ 
           var th=$(this)        
           _.isEmpty(th) 
            ?_.showEmptyFu(th) 
            :_.hideEmptyFu(th) 
           _.isValid(th) 
            ?_.showErrorFu(th) 
            :_.hideErrorFu(th) 
          }) 
         }, 
         submitFu:function(){ 
          _.validateFu() 
          var id=$(this).attr('id'); 
          var action=$(this).attr('action'); 

          if(!_.form.has('.'+_.invalidCl).length) 
           $.ajax({ 
            type: "POST", 
            url:_.mailHandlerURL, 
            data:{ 
             name:$('.name input',_.form).val()||'nope', 
             email:$('.email input',_.form).val()||'nope', 
             phone:$('.phone input',_.form).val()||'nope', 
             fax:$('.fax input',_.form).val()||'nope', 
             state:$('.state input',_.form).val()||'nope', 
             message:$('.message textarea',_.form).val()||'nope', 
             owner_email:_.ownerEmail, 
             stripHTML:_.stripHTML 
            }, 
            success: function(){ 
             _.showFu() 
            } 
           })   
         }, 
         showFu:function(){ 
          _.success.slideDown(function(){ 
           setTimeout(function(){ 
            _.success.slideUp() 
            _.form.trigger('reset') 
           },_.successShow) 
          }) 
         }, 
         controlsFu:function(){ 
          $(_.controls,_.form).each(function(){ 
           var th=$(this) 
           th 
            .bind('click',function(){ 
             _.form.trigger(th.data('type')) 
             return false 
            }) 
          }) 
         }, 
         showErrorFu:function(label){ 
          label.find('.'+_.errorCl).slideDown() 
         }, 
         hideErrorFu:function(label){ 
          label.find('.'+_.errorCl).slideUp() 
         }, 
         showEmptyFu:function(label){ 
          label.find('.'+_.emptyCl).slideDown() 
          _.hideErrorFu(label) 
         }, 
         hideEmptyFu:function(label){ 
          label.find('.'+_.emptyCl).slideUp() 
         }, 
         init:function(){ 
          _.form=this 
          _.labels=$('label',_.form) 

          _.preFu() 

          _.controlsFu() 

          _.form 
           .bind('submit',function(){ 
            if(_.validate) 
             _.submitFu() 
            else 
             _.form[0].submit() 
            return false 
           }) 
           .bind('reset',function(){ 
            _.labels.removeClass(_.invalidCl)         
            _.labels.each(function(){ 
             var th=$(this) 
             _.hideErrorFu(th) 
             _.hideEmptyFu(th) 
            }) 
           }) 
          _.form.trigger('reset') 
         } 
        } 
       if(!data) 
        (typeof opt=='object'?$.extend(_,opt):_).init.call(th), 
        th.data({cScroll:_}), 
        data=_ 
       else 
        _=typeof opt=='object'?$.extend(data,opt):data 
      }) 
      return this 
     } 
    }) 
})(jQuery) 

這其中大部分已經被列入我的網頁模板，並能正常工作。我加在的script.js文件中的以下兩個附加的形式

// Donate form 
$('#DonateForm').forms({ 
    ownerEmail:'#' 
}) 

    // join form 
$('#JoinForm').forms({ 
    ownerEmail:'#' 
}) 

我已經從他們驗證的角度來看工作。也就是說，他們似乎以與原始聯繫表格相同的方式正常工作。例如，如果您單擊按鈕或讓元素保持焦點，您將獲得用戶反饋，指示需要表單元素。但我無法弄清楚如何讓他們提交。

在我看來，在forms.js的原代碼專門編寫提交的聯繫方式。我的第一個想法是以某種方式在表單名稱上添加額外的評估，每個表單都有自己的url值和一組數據值。我只是不確定如何做到jquery的新功能。就目前而言，我的其他表單看起來會得到驗證，但是當我點擊提交按鈕時，沒有任何反應。

Answer 1

步驟一：命名您的形式，所以你可以很容易地檢索它們

//example 
<form id="joebob" name="jimbob" ... 
// in jquery can be called dynamically as: 
$("#joebob") 
//or 
$("form[name=jimbob]") 
//or you can create one dnamically 
var frmJoeBob = $("<form />").attr({ id: "joebob", action: "#smartUrl" }); 

第二步：我強烈建議你去here這個插件添加到庫中。

• 只需下載js並將其添加到您的標頭之後的jQuery腳本調用。
• 它能做什麼是允許的一個非常簡單的方法ajaxing您的形式，所以你可以有更多的控制權，他們做什麼，當他們做到這一點。

用法示例

// first establish a set of option in object style 
var formAjaxOptions = { 
    target: $("#SomeOutpuEle"), // this is where return text will be displayed on complete 
    beforeSubmit: function (formData, jqForm, options) { 
     /* Here you can preform work such as form validation before 
     the form is submitted. return false; to stop the form from 
     being submitted. */ 
    }, 
    success: function(responseText, statusText, xhr, $formresponseText, statusText, xhr, $form) { 
     /* Here you can preform work if the ajax call was successful, 
     this doesn't mean the serverside didn't have failures, though. 
     This simply means the ajax call is complete. console.log the 
     vars to get more information on them or see the docs. */ 
    } 
} 

// then ajax your form using the plugin with these options as such: 
$("#joebob").ajaxForm(formAjaxOptions); 

// then simply grab anything you wanna use as a button and set a click event to submit your form 
$("span.someButtonAsaSpan").click(function(e) { 
    $("#joebob").submit(); 
}); 

請參閱多麼容易？ 還有一點需要注意的是，options對象也可以用於（在這個插件中）提交jQuery.ajax選項，所以一旦你得到了更多關於發生了什麼的事情，你可以完全自定義它，不過你可以！

Answer 2

可以使用更容易

$('form').submit(function(e){ 
    e.preventDefault(); 
    var id=$(this).attr('id'); 
    var action=$(this).attr('action'); 
    if(id=='some_id') 
    { 
     $.ajax({ 
      type: "POST", 
      url:action, 
      data:{...}, 
      success: function(){...} 
     }); 
    } 

    if(id=='something_else') 
    { 
     $.ajax({ 
      type: "POST", 
      url:action, 
      data:{...}, 
      success: function(){...} 
     }); 
    } 
}); 

將這個代碼片段中的$（document）。就緒（函數（）{...}），並給出一個唯一的ID給每個窗體。