Как определить, какая форма отправлена ​​и обрабатывать различные функции отправки с помощью jquery - PullRequest
Новая
       1

Как определить, какая форма отправлена ​​и обрабатывать различные функции отправки с помощью jquery

0 голосов
/ 10 февраля 2012

Я новичок в 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. В настоящее время мои другие формы, кажется, проходят проверку, но ничего не происходит, когда я нажимаю кнопку отправки.

Ответы [ 2 ]

1 голос
/ 10 февраля 2012

Вы можете использовать более просто 

$('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 () {...}) и присвойте каждой форме уникальный идентификатор.

0 голосов
/ 10 февраля 2012

Шаг первый: Назовите ваши формы, чтобы вы могли легко их получить 

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

Шаг второй: я настоятельно предлагаю вам перейти сюда и добавить этот плагин вваша библиотека.

  • Просто скачайте 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();
});

Посмотрите, как легко этобыло?Еще одно замечание: объект параметров можно также использовать (в этом плагине) для отправки параметров jQuery.ajax, поэтому, как только вы узнаете больше о происходящем, вы можете полностью настроить его, как вам угодно!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...