Recuperation du contenu d'une balise SELECT

Default
,

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais


<!DOCTYPE html>
<html>
<head>
    <title>Ma page de test</title>
    <link rel="stylesheet" type="text/css" href="bootstrap.css">
</head>
<body>
    <div class="container">
        <p>
            <select id="type">
                <option value="t1" > Etudiant</option>
                <option value="t2" >Teacher</option>
            </select>
            <br><br>
        </p>

        <form id="t1">

            Welcome <br>
            Nom<input type="text" name="name" ><br>
            Prenom<input type="text" name="name"><br>
            Niveau <input type="text" name="student"><br><br>

        </form>

        <form id="t2">
            <br> <br>
            Welcome Teacher <br>
            Nom<input type="text" name="name"><br>
            Prenom<input type="text" name="name"><br>
            Grade <input type="text" name="grad"> 
        </form>

    </div>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function()
            {
                //alert("Je suis la !");
                if($("#type").val()=="t2")
                {
                    $('#t1').show();
                    $('#t2').hide();
                }
                else
                {
                    $('#t2').show();
                    $('#t1').hide();
                }
            });
        </script>
</body>
</html>

Ce que je veux

En fait je voudrais que quand on sélectionne # ETUDIANT, le formulaire de Etudiant s'affiche et quand on choisit

TEACHER celui de teacher qui s'affiche

Ce que j'obtiens

Le problème est que le formulaire ne change pas que je choisisse #ETUDIANT OU TEACHER.

4 Réponse

118779
, Il a répondu à ma question !

Salut

Tu y es presque, en fait la le test se fait uniquement au chargement de la page (document ready). Il faut juste effectuer l'action lors du select d'une toption différente. Ton JS devrait avoir cette tête:

$(document).ready(function () {
    alert('Je suis là (au chargement de la page)');

    $("#type").on('change', function (e) {
        alert('CHANGEMENT !!!');
        if ($(this).val() == "t2") {
            $('#t1').show();
            $('#t2').hide();
        }
        else {
            $('#t2').show();
            $('#t1').hide();
        }
    });
});

Default
, Il a répondu à ma question !

Je suis vraiment ému.
Au chargement de la page, les deux formulaires s'affichent et avant que l'une ne disparaisse lorsqu'on ne le selectionne pas.
Merci

Default
, Il a répondu à ma question !

Bonjour

J'ai caché un des formulaires avant le #if et j'ai le resultat que jesperais depuis

Merci

118779
, Il a répondu à ma question !

Si c'est tout bon, passe le sujet en résolu ;)