Formulaire contact js+php

Bonjour,

J'ai recupere un formulaire de contact tout fait en html dynamique avec du js pour la verification des champs. Cela fonctionne bien sauf que je voulais rajouter un champ select et c'est la que ca coince. Je n'arrive pas a recuperer le contenu de ce champ. Je n'arrive pas a modifier les fichier js et/ou php pour que les donnees soient envoyees par le formulaire.
C'est pour ca que je viens solliciter votre aide apres avoir chercher partout et tenter un tas d'essais.

je vous met ci-dessous les codes en questions :

le code html:

<form id="contact-form">
                  <div class="success"> Le formulaire a &eacute;t&eacute; envoy&eacute;. <strong>Nous vous r&eacute;pondrons bient&ocirc;t.</strong> </div>
                  <fieldset>
                <div>
                    <label class="name">
                    <input type="text" value="Votre nom">
                  <br>
                    <span class="error">*Ceci n'est pas un nom valide.</span> <span class="empty">*Ce champ est obligatoire.</span> </label>
                    </div>
                  <!-- <div>
                    <label class="phone">
                    <input type="tel" value="Telephone">
                    <br>
                    <span class="error">*This is not a valid phone number.</span> <span class="empty">*Ce champ est obligatoire.</span> </label>
                    </div> -->
                <div>
                    <label class="email">
                    <input type="email" value="Votre Email">
                    <br>
                    <span class="error">*Ceci n'est pas une adresse valide.</span> <span class="empty">*Ce champ est obligatoire.</span> </label>
                    </div>               
                    <div>                  
                    <select class="sujet" name="sujet" id="sujet">
                                            <option value="Demande d'information" selected="selected">Demande d'information</option>
                                            <option value="Demande de dessin">Demande de dessin</option>
                                            <option value="Réclamation">R&eacute;clamation</option>
                                            <option value="Autre">Autre</option>
                                        </select>
                                       
                    <br>
                    </div>
                <div>
                    <label class="message">
                    <textarea>Votre Message</textarea>
                   
                    R&eacute;digez votre mail uniquement en francais, anglais ou neerlandais.
                    <br></br>
                    <span class="error">*Votre message est trop court.</span> <span class="empty">*Ce champ est obligatoire.</span> </label>                   
                    </div>
                <div class="buttons-wrapper"> <a class="btn btn-1" data-type="reset">Effacer</a> <a class="btn btn-1" data-type="submit">Envoyer</a></div>
              </fieldset>
                </form>

le script :

//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:'troll.farceur2@free.fr',
                    stripHTML:true,
                    smtpMailServer:'localhost',
                    targets:'input,textarea,select',
                    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'},
                        ".sujet":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'select'},
                        ".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)),
                                    sujet:_.getValFromLabel($('.sujet',_.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(){    
             $('#contact-form').forms({
          ownerEmail:'troll.farceur2@free.fr'
          })
   })

le php :

<?php
    $owner_email = $_POST["owner_email"];
    $headers = 'From:' . $_POST["email"];
    $subject = 'A message from your site visitor ' . $_POST["sujet"] . $_POST["name"];
    $messageBody = "";
   
    if($_POST['name']!='nope'){
        $messageBody .= '<p>Expediteur: ' . $_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['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";
    }
?>

D'avance merci

pour il faudrait que tu repartes du js de départ et que tu ne modifies que la partie ajax qui s'occupe d'envoyer les variables.

var select = document.getElementById("sujet");

sujet = select.options[select.selectedIndex].value;
$.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)),
                                    sujet: sujet ,
                                    message:_.getValFromLabel($('.message',_.form)),
                                    owner_email:_.ownerEmail,
                                    stripHTML:_.stripHTML
                                },
                                success: function(){
                                    _.showFu()
                                }
                            })

quelque chose comme ça, le reste sert à vérifier les contenus des input ce qui dans le cas d'un select n'a pas lieu d'être vu qu'ils sont définis par toi.

Anonyme

15 mai 2014 à 10:46:34

silent auben

15 mai 2014 à 11:18:49

Kyle Katarn

15 mai 2014 à 11:21:13

Le système que tu as copié-collé se base sur les label, or ton <select> n'a pas de label. Cependant, tu peux passer directement la value comme n'importe quel élément de formulaire en JS :

                                data:{
                                    name:_.getValFromLabel($('.name',_.form)),
                                    email:_.getValFromLabel($('.email',_.form)),
                                    phone:_.getValFromLabel($('.phone',_.form)),
                                    fax:_.getValFromLabel($('.fax',_.form)),
                                    state:_.getValFromLabel($('.state',_.form)),
                                    sujet:document.getEmementById('sujet').value,
                                    message:_.getValFromLabel($('.message',_.form)),
                                    owner_email:_.ownerEmail,
                                    stripHTML:_.stripHTML
                                },

Holowar | Carbon | Pug for PHP

15 mai 2014 à 13:48:18

et je ne modifie rien dans le php? lui il est ok?

15 mai 2014 à 13:56:37

aiko1 a écrit:

bien sur que si, il faut récupérer la variable Post['sujet']

15 mai 2014 à 14:09:51

aiko1, si tu ne connais rien ni au PHP ni au JS, il faut commencer par les tutos.

15 mai 2014 à 14:43:41

la variable post['sujet'] je la recupere bien dans le php, je voulais dire si le cote php etait bon. Par contre quand je fait les modifications que vous suggerez il ne se passe rien le formulaire ne s'envoie pas

15 mai 2014 à 14:51:50

tu as des erreurs en javascript? Peux tu vérifier avec le debug de Chrome/FF stp.

15 mai 2014 à 15:22:47

il ne signale rien d'anormal

16 mai 2014 à 13:42:38

Tu es en train de perdre ton temps, le code que je t'ai donné envoie le sujet dans les données POST avec toutes les autres données. Si en regardant ton code PHP, tu ne vois pas comment récupérer ton sujet et l'ajouter au mail, c'est que tu as des lacunes en PHP et pour les combler il n'y a rien de mieux que les tutos.

Impossible de recuperer un champ

Formulaire contact js+php

Supprimer

Modérer

Signaler le message aux modérateurs