Affichage de formulaire en jQuery

Par Davixs27, il y a 14 ans

Javascript

Bonjour,

Voilà, je vous explique mon problème. J'ai un formulaire simple qui commence par un champ select qui a l'id #type. Et en bas, il y a un champ date qui est par défaut en Display:none.

Ce que j'aimerais faire, c'est que le champ avec #date s'affiche quand l'utilisateur clique sur le champ du select qui a la valeur 3

J'ai donc fait ceci en jQuery :

if($("#type").val() == 3){
    $("#date").fadeIn("slow");
}

$("*#type").click(function(){
    valeur = $(this).attr("value");
    if(valeur == 3){$("#date").fadeIn("slow");}
    else{$("#date").fadeOut("slow");}
    return valeur;})

Ce code fonctionne, mais uniquement sur Firefox... Comment faire pour que cela fonctionne partout (Chrome, Safari et IE) ?

Merci d'avance !

5 réponses

MrGuillou, il y a 14 ans

bonjour,

ajoute var devant valeur.
En javascript il faut toujours déclarer les variables pour éviter les bugs sur ie
A la fin de ton code ajoute aussi un ';' pour fermer correctement ta ligne.
Tu as aussi une petite étoile qui s'est glissée dans le sélecteur ligne 5.
La valeur que tu récupères est surement dans un format string, donc il faut la transformer en int avec la fonction parseInt pour éviter les bug

Et bien sur il faut placer le tous dans le ready de jquery pour vérifier que la page est bien chargé.

Finale :

jQuery(document).ready(function($){
    if(parseInt($("#type").val()) == 3){
        $("#date").fadeIn("slow");
    }

    $("#type").click(function(){
        var valeur = parseInt($(this).attr("value"));
        if(valeur == 3){
            $("#date").fadeIn("slow");
        }else{
            $("#date").fadeOut("slow");
        }
        return valeur;
    });
});
Davixs27, il y a 14 ans

Merci de ton aide Jbou43 ! Mais malheureusement, ça ne fonctionne pas...

MrGuillou, il y a 14 ans

on peut avoir le code html ?

Davixs27, il y a 14 ans

Oui, par contre le value et le texte des options sont appeler en PHP

<form action="<?=$_SERVER'PHP_SELF']?>" method="post" id="article" enctype="multipart/form-data">
                <label for="Type">Type</label><br />
                <select name="Type" id="type">
                 <?php
                while ($donnees = $reponse->fetch())
                {
                ?>    
                <option value="<?php echo (htmlspecialchars($donnees'id'])); ?>"><?php echo (htmlspecialchars($donnees'nom'])); ?></option>
                <?php
                }
                 ?>
                </select>
                <br />
                <label for="Titre">Titre</label><br /><input type="text" name="Titre" id="titre" /><span class="erreur"></span><br />
                 <label for="Image">Image</label><br /><input type="file" name="image" class="file" id="file" /><span class="erreur"></span><br />
                <div id="date"><label for="Debut">Debut des cours</label><br /><input type="text" name="Debut" id="debut" /><span class="erreur"></span><br /></div>
                <textarea rows="10" name="Contenu" id="Contenu" style="width:500px;"></textarea> 
                <input class="envoyer" type="submit" id="envoyer" name="submit" value="Envoyer" />
                </form>
Davixs27, il y a 14 ans

Un ami m'a donner une autre solution qui fonctionne ! Je la mets pour ceux que ça intéresse !

$(document).ready(function(){
$('#date').hide();
$('select').change(function(){
if($(this).val()=='Autres'){
$('#date').show();
}
else{
$('#date').hide();
}
});
});

Voilà

Merci quand même ;-)