Recuperation du contenu d'une balise SELECT

haurel
Javascript

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éponses

G1.3

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();
        }
    });
});
haurel
Auteur

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

haurel
Auteur

Bonjour

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

Merci

G1.3

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