Salut le monde!!

Je suis sur Symfony...j'ai un formulaire...je demande une date de naissance et j'aimerai à l'aide d'un script javascript calculer automatiquement un age. Voici mes différent écrans.

le formulaire:

 public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $civilite = array('Mme.'=>'Madame', 'M.'=>'Monsieur');

        $builder
            ->add('civilite',  ChoiceType::class, array('choices' => $civilite))

            ->add('nom', TextType::class)

            ->add('prenom', TextType::class)

            ->add('dateAnniversaire', TextType::class, array(
                'attr' => array('class'=> 'dateNaissance')))
            
            ->add('age', TextType::class, array(
                'attr' => array('class'=> 'inputAge')))

            ->add('adresse', TextType::class)
//....//

la vue twig:

//..//
        <div class="row">
                <div class="col-lg-2">
                    <div class="form-group">
                        <label class="control-label">Date de naissance:</label>
                        {{ form_errors(form.dateAnniversaire) }}
                        {{ form_widget(form.dateAnniversaire) }}
                    </div>
                </div>
                <div class="col-lg-1">
                    <div class="form-group">
                        <label class="control-label">Age:</label>
                        {{ form_errors(form.age) }}
                        {{ form_widget(form.age) }}
                    </div>
                </div>
            </div>
//..//

le js:

function calcul_age(naissance,reponse){
    var date_naissance = document.getElementsByClassName(naissance).value;
    //l'appel de la fonction se fait a chaque chiffre tapé, on verifie donc que tous les chiffres de la date ont été tapés pour faire le calcul
    var reg=new RegExp("^[0-9]{1,2}/[0-9]{1,2}/[0-9]{4}$","i");
    if(reg.test(date_naissance)){
        var elem_n = date_naissance.split('/');
        jour_n = elem_n[0];
        mois_n = elem_n[1];
        annee_n = elem_n[2];

        var date_day = new Date();
        jour_day = date_day.getDate();
        mois_day = date_day.getMonth()+1;
        annee_day = date_day.getFullYear();

        //calcul age
        var ans; var mois; var age="";

        if(mois_day >= mois_n){
            ans =  annee_day - annee_n;
            mois= mois_day - mois_n;
        }else{
            ans =  (annee_day - annee_n) -1;
            mois= mois_day +( 12 - mois_n);
        }
        if(jour_day < jour_n){
            mois= mois -1;
            if(mois_day < mois_n){
                ans =  ans -1;
            }
        }

        if(ans >0 && ans <=1) age += ans+' an ';
        if(ans >1) age += ans+' ans ';
        if(mois >0) age +=mois+' mois ';
        // on affiche le résultat
        document.getElementsByClassName(reponse).innerHTML = age;
    }else{
        return false;
    }
}

$(document).ready(function(){
    $( function() {
        $( ".dateNaissance" ).datepicker({
            dateFormat: 'dd/mm/yy',
            yearRange: '1920:c+10',
            changeMonth: true,
            changeYear: true
        });
    } );

    $(".dateNaissance").blur(function () {
        calcul_age(dateNaissance,inputAge);
    });
    
});

La fonction Calcul_age, fonctionne très bien... lorsque je test sur une vue classique(avec les balise <input>)...mais dès lors que j'essaye d'adapter tout ca dans le cadre de mon projet(symfony, php, twig), la fonction ne s’exécute pas..?? Ajoutez à cela un niveau pas vraiment balaise en javascript...Bref!! svp, aidez moi, éclairez moi sur une probable piste ou une grosse connerie qui vous saute au yeux!!

Merci!!

-
Edité par Ratpi@ 20 juillet 2017 à 17:23:54

Allez! je vous envoi la solution toute faite!! A Coup de bidouille et recherche, je suis venu à bout, bien que mon niveau en js ne soit pas fantastique!!!

Ma solution fonctionne sur mon projet sous symfony.

voila le formulaire:

public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $civilite = array('Mme.'=>'Madame', 'M.'=>'Monsieur');

        $builder
            ->add('civilite',  ChoiceType::class, array('choices' => $civilite))

            ->add('nom', TextType::class)

            ->add('prenom', TextType::class)

            ->add('dateAnniversaire', TextType::class, array(
                'attr'=> array(
                    'class' => 'datepicker',
                    'placeholder' => 'jj/mm/aaaa')))

            ->add('age', TextType::class)

            ->add('adresse', TextType::class)
//....//

la vue twig:

//..// 
<div class="row">
                <div class="col-lg-2">
                    <div class="form-group">
                        <label class="control-label">Date de naissance:</label>
                        {#<input  class="form-control" type="text" name="ma_lrmbundle_candidat[dateAnniversaire]" id="ma_lrmbundle_candidat_dateAnniversaire" />#}
                        {{ form_errors(form.dateAnniversaire) }}
                        {{ form_widget(form.dateAnniversaire) }}
                    </div>
                </div>
                <div class="col-lg-1">
                    <div class="form-group">
                        <label class="control-label">Age:</label>
                        {#<input  class="form-control" type="text" name="ma_lrmbundle_candidat[age]" id="ma_lrmbundle_candidat_age" />#}
                        {{ form_errors(form.age) }}
                        {{ form_widget(form.age) }}
                    </div>
                </div>
            </div>
//...//

le js:

function calcul_age(naissance,reponse){
    var date_naissance = document.getElementById(naissance);
    if(date_naissance != null)
    {
        date_naissance = date_naissance.value;
            //console.log(date_naissance);
        //l'appel de la fonction se fait a chaque chiffre tapé, on verifie donc que tous les chiffres de la date ont été tapés pour faire le calcul
        var reg=new RegExp("^[0-9]{1,2}/[0-9]{1,2}/[0-9]{4}$","i");
        if(reg.test(date_naissance)){
            var elem_n = date_naissance.split('/');
            console.log(elem_n);
            jour_n = elem_n[0];
            mois_n = elem_n[1];
            annee_n = elem_n[2];

            var date_day = new Date();
            jour_day = date_day.getDate();
            mois_day = date_day.getMonth()+1;
            annee_day = date_day.getFullYear();

            //calcul age
            var ans; var mois; var age="";

            if(mois_day >= mois_n){
                ans =  annee_day - annee_n;
                mois= mois_day - mois_n;
            }else{
                ans =  (annee_day - annee_n) -1;
                mois= mois_day +( 12 - mois_n);
            }
            if(jour_day < jour_n){
                mois= mois -1;
                if(mois_day < mois_n){
                    ans =  ans -1;
                }
            }

            if(ans >0 && ans <=1) age += ans //+' an ';
            if(ans >1) age += ans //+' ans ';
            //if(mois >0) age +=mois+' mois ';

            // on affiche le résultat
            return document.getElementById(reponse).innerHTML = age;
        }else{
            return false;
        }
    }

}

$(document).ready(function(){

    $( ".datepicker" ).datepicker({
        dateFormat: 'dd/mm/yy',
        yearRange: '1920:c+10',
        changeMonth: true,
        changeYear: true
    });



    
    $("#ma_lrmbundle_candidat_dateAnniversaire").focus(function () {
        $(this).change(function () {
           var resultat_age = calcul_age('ma_lrmbundle_candidat_dateAnniversaire','ma_lrmbundle_candidat_age');
            $("#ma_lrmbundle_candidat_age").val(resultat_age);
        });

    })
    
});

Pour ce qui concerne les id de mes champs de formulaire généré par symfony, j'ai du inspecter ma page sur mon navigateur pour en prendre connaissance autrement je n'ai pas réussi à les personnaliser...?? si quelqu'un a la solution, je suis preneur!!

N'oubliez pas de faire les appels des fichiers js dans vos vues et le tour et joué!!

En espérant que cela rende service!!!

-
Edité par Ratpi@ 21 juillet 2017 à 17:46:20