如何在forms.js中插入选择多个选项字段?

时间:2013-10-08 18:47:31

标签: javascript php jquery html forms

以下是我想用于“灯具”的选择选项的html表单代码。已经插入的“绘画”:

<form action="#" id="ContactForm">
    <div class="success">Contact form submitted!
        <br>    <strong>We will be in touch soon.</strong> 
    </div>
    <fieldset>
        <div class="wrapper">   <span class="col1">Name:</span>

            <label class="name">    <span class="bg"><input type="text" class="input"></span>
    <span class="error">*This is not a valid name.</span>  <span class="empty">*This field is required.</span>

            </label>
        </div>
        <div class="wrapper">   <span class="col1">Email:</span>

            <label class="email">   <span class="bg"><input type="text" class="input"></span>
    <span class="error">*This is not a valid email address.</span>  <span class="empty">*This field is required.</span>

            </label>
        </div>
        <div class="wrapper">   <span class="col1">Phone:</span>

            <label class="phone">   <span class="bg"><input type="text" class="input"></span>
    <span class="error">*This is not a valid phone number.</span>  <span class="empty">*This field is required.</span>

            </label>
        </div> <strong>Interested in:</strong>  <small style="font-size:10px">* Hold down the Ctrl/Command key to select multiple options.</small>

        <div class="wrapper">   <span class="col1">Lamps:</span>

            <label class="lamps notRequired">   <span class="bg"><select name="lamps" multiple>
                                                        <option value="Green Leaf">Green Leaf</option>
                                                        <option value="Colour Vault">Colour Vault</option>
                                                        <option value="Palace Tower">Palace Tower</option>
                                                        <option value="Sun Structure">Sun Structure</option>
                                                        <option value="Puzzled">Puzzled</option>
                                                        <option value="Colour Vault #2">Colour Vault #2</option>
                                                        <option value="Royal Velvet">Royal Velvet</option>
                                                        <option value="Royal Velvet #2">Royal Velvet #2</option>
                                                        <option value="Palace Tower #2">Palace Tower #2</option>
                                                        </select>
                                                    </span>
 <span class="error">*This is not a valid lamp selection.</span>

            </label>
        </div>
        <div class="wrapper">   <span class="col1">Paintings:</span>

            <label class="paintings notRequired">   <span class="bg"><select name="paintings" multiple>
                                                        <option value="The Maya">The Maya</option>
                                                        <option value="The Maya #2">The Maya #2</option>
                                                        <option value="The Maya #3">The Maya #3</option>
                                                        <option value="Mellow">Mellow</option>
                                                        <option value="Arizona at Dusk">Arizona at Dusk</option>
                                                        <option value="Festival">Festival</option>
                                                        <option value="The Flow">The Flow</option>
                                                        <option value="Summer Frost">Summer Frost</option>
                                                        <option value="Midnight in Mexico">Midnight in Mexico</option>
                                                        <option value="The Tunnel">The Tunnel</option>
                                                        <option value="Fusion">Fusion</option>
                                                        <option value="Gold Maya">Gold Maya</option>
                                                        <option value="Mexican Party Night">Mexican Party Night</option>
                                                        <option value="Aurora">Aurora</option>
                                                        <option value="Ghosts">Ghosts</option>
                                                        <option value="Crimson">Crimson</option>
                                                        <option value="Crimson #2">Crimson #2</option>
                                                        <option value="Colours on Holiday">Colours on Holiday</option>
                                                        </select>
                                                    </span>
 <span class="error">*This is not a valid painting selection.</span>

            </label>
        </div>
        <div class="wrapper">   <span class="col1">Message:</span>

            <label class="message"> <span class="bg"><textarea rows="1" cols="1"></textarea></span>
    <span class="error">*The message is too short.</span>  <span class="empty">*This field is required.</span>

            </label>
        </div>
        <div class="btns"><a href="#" class="link1" data-type="submit" title="Send Inquiry">Send</a><a href="#" class="link1" data-type="reset" title="Clear Form Content">Clear</a>
        </div>
    </fieldset>
</form>

这是代码mailHandler.php,其中$ _POST'lights'&amp; “绘画”已经插入:

<?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";
}else{
    $headers = '';
}
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['lamps']!='nope'){        
    $messageBody .= '<p>Lamps Interested In: ' . $_POST['lamps'] . '</p>' . "\n";
    $messageBody .= '<br>' . "\n";
}
if($_POST['paintings']!='nope'){        
    $messageBody .= '<p>Paintings Interested In: ' . $_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";
}

enter code here&GT;

这是我试图使用上面的html&amp; amp;的form.js文件。 php mailHandler:

;(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:'bin/MailHandler.php',
                ownerEmail:'xxxxx@xxxxx.com',
                stripHTML:true,
                smtpMailServer:'localhost',
                targets:'input,textarea',
                controls:'a[data-type=reset],a[data-type=submit]',
                validate:true,
                rx:{
                    ".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.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:{
                                name:_.getValFromLabel($('.name',_.form)),
                                email:_.getValFromLabel($('.email',_.form)),
                                phone:_.getValFromLabel($('.phone',_.form)),
                                fax:_.getValFromLabel($('.fax',_.form)),
                                state:_.getValFromLabel($('.state',_.form)),
                                message:_.getValFromLabel($('.message',_.form)),
                                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() { 
    $('#ContactForm').forms({
        ownerEmail:'xxxxx@xxxxx.com'
    })
})

我尝试了几种不同的方法,但无法通过表单的电子邮件提交来使表单正常工作或实际发送选择的多个选项数据。这里的任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

只需在select的名称后添加[],这将告诉PHP期望一个数组,例如

<select name="paintings[]" multiple>