前端开发

javascript – JS / PHP邮件处理程序单选按钮

2021-01-15 21:13:40 阅读数 933 收藏 0
现在我一直试图让这个JS邮件处理程序与单选按钮一起工作,但没有运气.

我有没有单选按钮的表单,但是一旦我添加它就停止响应我相信这是JS方面的问题,因为我是JS的新手.

通过单击发送时停止响应没有任何反应. JS仍然对所有其他字段进行验证,但不会将表单发送到电子邮件.

希望这是有道理的,因为它迟到会明确地阅读这个明天的事情.

无论如何这里是我正在使用的代码任何帮助非常感谢.

Forms.js:

//forms
;(function($){
    $.fn.forms=function(o){
        return this.each(function(){
            var th=$(this),_=th.data('forms')||{
                    errorCl:'error',emptyCl:'empty',invalidCl:'invalid',notRequiredCl:'notRequired',successCl:'success',successShow:'4000',mailHandlerURL:'bat/MailHandler.php',ownerEmail:'support@template-help.com',stripHTML:true,smtpMailServer:'localhost',targets:'input,textarea,select',controls:'a[data-type=reset],a[data-type=submit]',validate:true,rx:{
                        ".topic":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:select'  },".name":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},".state":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,".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,".phone":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,".fax":{rx:/^\+?(\d[\d\-\+\(\) ]{5,".message":{rx:/.{20}/,target:'textarea'}
                    },preFu:function(){
                        _.labels.each(function(){
                            var label=$(this),inp=$(_.targets,this),defVal=inp.val(),trueVal=(function(){
                                            var tmp=inp.is('input')?(tmp=label.html().match(/value=['"](.+?)['"].+/),!!tmp&&!!tmp[1]&&tmp[1]):inp.html()
                                            return defVal==''?defVal: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(){
                                    _.validateFu(label)
                                    if(_.isEmpty(label))
                                        inp.val(defVal),_.hideErrorFu(label.removeClass(_.invalidCl))                                          
                                })
                                .bind('keyup',function(){
                                    label.hasClass(_.invalidCl)
                                        &&_.validateFu(label)
                                })
                            label.find('.'+_.errorCl+',.'+_.emptyCl).css({display:'block'}).hide()
                        })
                        _.success=$('.'+_.successCl,_.form).hide()
                    },isRequired:function(el){                            
                        return !el.hasClass(_.notRequiredCl)
                    },isValid:function(el){                           
                        var ret=true
                        $.each(_.rx,function(k,d){
                            if(el.is(k))
                                ret=d.rx.test(el.find(d.target).val())                                      
                        })
                        return ret                          
                    },isEmpty:function(el){
                        var tmp
                        return (tmp=el.find(_.targets).val())==''||tmp==el.data('defVal')
                    },validateFu:function(el){                            
                        el.each(function(){
                            var th=$(this),req=_.isRequired(th),empty=_.isEmpty(th),valid=_.isValid(th)                                

                            if(empty&&req)
                                _.showEmptyFu(th.addClass(_.invalidCl))
                            else
                                _.hideEmptyFu(th.removeClass(_.invalidCl))

                            if(!empty)
                                if(valid)
                                    _.hideErrorFu(th.removeClass(_.invalidCl))
                                else
                                    _.showErrorFu(th.addClass(_.invalidCl))                             
                        })
                    },getValFromLabel:function(label){
                        var val=$('input,textarea',label).val(),defVal=label.data('defVal')                                
                        return label.length?val==defVal?'nope':val:'nope'
                    },submitFu:function(){
                        _.validateFu(_.labels)                          
                        if(!_.form.has('.'+_.invalidCl).length)
                            $.ajax({
                                type: "POST",url:_.mailHandlerURL,data:{
topic:_.getValFromLabel($('.topic',_.form)),name:_.getValFromLabel($('.name',email:_.getValFromLabel($('.email',phone:_.getValFromLabel($('.phone',fax:_.getValFromLabel($('.fax',state:_.getValFromLabel($('.state',message:_.getValFromLabel($('.message',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=_.me                     
                        _.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')
                    }
                }
            _.me||_.init(_.me=th.data({forms:_}))
            typeof o=='object'
                &&$.extend(_,o)
        })
    }
})(jQuery)
$(window).load(function(){  
             $('#contact-form').forms({
         ownerEmail:'#'
         })

MailHandler.php

<?php
    $owner_email = $_POST["owner_email"];
    $headers = 'From:' . $_POST["email"];
    $subject = 'A message from your site visitor ' . $_POST["name"];
    $messageBody = "";

    if($_POST['name']!='nope'){
        $messageBody .= '<p>Visitor: ' . $_POST["name"] . '</p>' . "\n";
        $messageBody .= '<br>' . "\n";
    }
    if($_POST['email']!='nope'){
        $messageBody .= '<p>Email Address: ' . $_POST['email'] . '</p>' . "\n";
        $messageBody .= '<br>' . "\n";
    }
    if($_POST['state']!='nope'){        
        $messageBody .= '<p>State: ' . $_POST['state'] . '</p>' . "\n";
        $messageBody .= '<br>' . "\n";
    }
    if($_POST['phone']!='nope'){        
        $messageBody .= '<p>Phone Number: ' . $_POST['phone'] . '</p>' . "\n";
        $messageBody .= '<br>' . "\n";
    }   
    if($_POST['fax']!='nope'){      
        $messageBody .= '<p>Fax Number: ' . $_POST['fax'] . '</p>' . "\n";
        $messageBody .= '<br>' . "\n";
    }
    if($_POST['message']!='nope'){
        $messageBody .= '<p>Message: ' . $_POST['message'] . '</p>' . "\n";
    }

    if($_POST["stripHTML"] == 'true'){
        $messageBody = strip_tags($messageBody);
    }

    try{
        if(!mail($owner_email,$subject,$messageBody,$headers)){
            throw new Exception('mail failed');
        }else{
            echo 'mail sent';
        }
    }catch(Exception $e){
        echo $e->getMessage() ."\n";
    }
?>

形成

form id="contact-form" action="/MailHandler.php">
    <div class="success">
         Contact form submitted! <strong>We have received your email and will be with you within 24 hours.</strong>
    </div>
    <fieldset>
        <div>
            <label class="part">
                 <p>A</p><input type="radio" name="part" id="part" value="a">
                 <p>B</p><input type="radio" name="part" id="part" value="b">
            </label>
        </div>
        <div>
            <label class="name">
            <input type="text" value="Your name">
            <br>
            <span class="error">*This is not a valid name.</span><span class="empty">*This field is required.</span></label>
        </div>
        <div>
            <label class="phone">
            <input type="tel" value="Telephone (Please include country code)">
            <br>
            <span class="error">*This is not a valid phone number.</span><span class="empty">*This field is required.</span></label>
        </div>
        <div>
            <label class="email">
            <input type="email" value="Email">
            <br>
            <span class="error">*This is not a valid email address.</span><span class="empty">*This field is required.</span></label>
        </div>
        <div>
            <label class="message">
            <textarea>Message</textarea>
            <br>
            <span class="error">*The message is too short.</span><span class="empty">*This field is required.</span></label>
        </div>
        <div class="buttons-wrapper">
            <a class="btn btn-1" data-type="reset">Clear</a><a class="btn btn-1" data-type="submit">Send</a>
        </div>
    </fieldset>
</form>

解决方法

看起来您正在使用的插件未设置为处理无线电输入.

虽然它不太难修改.

您需要更改插件的3个部分.您还需要将.error和.empty元素添加到.part标签中

首先添加这个….

<label class="part">
             <p>A</p><input type="radio" name="part" id="part" value="a">
             <p>B</p><input type="radio" name="part" id="part" value="b">
            <br/>
            <span class="error">* Error occurred</span><span class="empty">*This field is required.</span>
        </label>

添加后,您可以看到表单没有发送,因为它认为有错误(它认为无线电是空的).

这将导致我调查插件中的isEmpty()函数.

我修改了插件的这一部分,看起来像这样……

isEmpty:function(el){
                    var targets = el.find(_.targets);
                    if(targets.length > 1 && targets.is("input[type='radio']")){
                        var checked = targets.filter(":checked");
                        if(checked.length){
                            return false;
                        }else{
                            return true;
                        }
                    }else{
                        var tmp
                        return (tmp=el.find(_.targets).val())==''||tmp==el.data('defVal')
                    }
                }

该插件现在检查标签内是否有多个输入,以及这些输入是否为无线电.如果是,则检查其中一个无线电是否已经:检查过.如果有,则不应将其视为空并返回true,从而停止错误消息.

需要进行的第二个修改是将带有类.part的标签添加到通过ajax发送到服务器的数据中.这可以在submitFu()函数中找到.我把它修改如下……

submitFu:function(){
                        _.validateFu(_.labels)
                        if(!_.form.has('.'+_.invalidCl).length)
                            $.ajax({
                                type: "POST",data:{
                                topic:_.getValFromLabel($('.topic',part:_.getValFromLabel($('.part',success: function(){
                                    _.showFu()
                                }
                            })
                    }

这是你需要添加的…

part:_.getValFromLabel($('.part',

现在数据将被发送到服务器.但是……它没有被发送.那么我们必须查看函数getValFromLabel()来了解原因.

这再次没有设置处理单选按钮.所以稍作修改……

getValFromLabel:function(label){
                        var target = $('input,label);
                        if(target.length > 1 && target.is("input[type='radio']")){
                            var val = target.filter(":checked").val() || nope;
                            return val;
                        }else{
                            var val=$('input,defVal=label.data('defVal')
                            return label.length?val==defVal?'nope':val:'nope'
                        }
                    }

我们再次检查标签中的输入是否是无线电,如果是,则返回:checked一个的值.

成功.

您现在可以填写表单并点击提交,并将收音机中的数据发布到服务器.

  • 上一篇:javascript – 除了Chrome之外,Ang下一篇:javascript – 使用document.getEl
猜你在找的JavaScript相关文章
  • · JavaScript的事件及异常捕获01-14
  • · 面试题 js重写原生函数(以push为例)01-10
  • · 关于toLocaleString(), toString(), valueOf()方法的使用01-10
  • · JS继承的6种方式(非ES6)01-10
  • · 如何实现 Promise 池01-10
  • · Number() 与 parseInt()解析01-10
  • · 你知道 react-color 的实现原理吗01-10
  • · Window.Open参数、返回值01-01
  • · 前端进阶之认识与手写compose方法12-30
  • · JS的Truthy和Falsy(真值与假值)12-28
  • · [代码笔记]JS保持函数单一职责,灵活组合12-28
  • · JS之AMD、CMD、CommonJS、ES6、UMD的使用笔记12-28