如何使用jquery确定提交了哪个表单并处理不同的提交函数

我是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的完整代码（而不是原始帖子中的代码片段）：

其中大部分内容已经包含在我的页面模板中，效果很好。我在script.js文件中为另外两个表单添加了以下内容

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

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

我让他们从验证的角度工作。也就是说，它们似乎以与原始接触形式相同的方式正常工作。例如，如果您单击按钮或离开某个元素的焦点，您将收到用户反馈，表明表单元素是必需的。但我不太明白如何让他们提交

---

在我看来，forms.js中的原始代码是专门为提交联系人表单而编写的。我的第一个想法是以某种方式在表单名称上添加一个附加的求值，每个表单都有自己的url值和从表单中提取的一组数据值。对于jquery来说，我只是不知道该怎么做。目前，我的其他表单似乎得到了验证，但当我点击提交按钮时，什么也没有发生

第一步：命名表单，以便轻松检索

//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" });

看看这有多容易？

---

还有一点需要注意的是，options对象也可以用来（在这个插件中）提交jQuery.ajax选项，因此，一旦您对正在发生的事情有了更多的了解，您就可以随心所欲地完全定制它了

您可以更轻松地使用

$('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）.ready（function（）{…}）中，并为每个表单提供一个唯一的id。

感谢您的回复。这是我最初想到的事情。然而，这并不完全适合现有的代码。我已经修改了原来的帖子，包含了我正在使用的完整代码。如果我按原样实现了这一点，恐怕会丢失正在运行的现有验证代码。如果我对语言没有更好的了解，我通常不会尝试编辑已建立的代码，但我没有时间从头开始。我还将研究您引用的插件，看看将来如何使用它。我只是希望不要完全重写现有的表单功能，所以我希望能够在我已有的代码范围内找到如何工作的方法。我已将完整代码发布到原始问题。谢谢你的回复！

// 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();
});

$('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(){...}  
        });
    }
});