IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Formulaire : conflit entre <span> et onchange


Sujet :

JavaScript

  1. #1
    Nouveau membre du Club
    Femme Profil pro
    Journaliste - formateur web
    Inscrit en
    Octobre 2017
    Messages
    35
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Journaliste - formateur web
    Secteur : Enseignement

    Informations forums :
    Inscription : Octobre 2017
    Messages : 35
    Points : 37
    Points
    37
    Par défaut Formulaire : conflit entre <span> et onchange
    Bonjour à tous,

    Je poste ce message car j'ai une difficulté dans l'affichage dans un formulaire dynamique en HTML et JS.

    A chaque fois que l'internaute choisit une réponse, j'essaie d'afficher un bloc correspondant à la réponse.

    Dans ce cas, lorsqu'il répond à la première question, le bon bloc 2 s'affiche bien. Mais quand on passe à la question 3, impossible d'afficher le bon bloc en question. En lisant en ligne la doc, j'ai compris qu'il y a un conflit entre mes balises <span> qui encadre les blocs 3 à 5 et ma fonction "onchange" qui est censé appeler le bon bloc en fonction de la réponse.

    Avez-vous une idée : savez-vous comment je pourrais contourner ce problème ?
    Je suis débutante en JS.
    Merci d'avance pour votre aide.

    Voici mon code :
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <link rel="stylesheet" href="style-devis.css" />
            <title>Demande de devis</title>
        </head>
     
        <body onload="aff_vitrine('non'); aff_commerce('non'); seo('non'), blog_vitrine('non')"  />
     
     
        <H1>Commencez votre projet : demandez un devis</H1>
     
        <p>Vous avez une idée, un projet web mais vous ne savez pas par quoi commencer.<br/>
            Répondez au formulaire ci-dessous. Son objectif : vous aider à trouver la solution la plus adéquate.</p>
     
     
        <form method="post" action="postIndex.php">
     
            <!-- question 1 -->
            <label>Quel type de site souhaitez-vous ?</label><br/>
            <input type="radio" name="site" value="Site Vitrine"  onchange="aff_vitrine('oui'); aff_commerce('non')" /><label>Site Vitrine</label>
            <input type="radio" name="site" value="Site E-commerce" onchange="aff_vitrine('non'); aff_commerce('oui')"/><label>Site E-commerce</label> </br>
    *********<br/>
     
            <!-- question 2 si réponse site vitrine -->
            <span type="hidden" id="block_vitrine">
            <label>Combien de pages contiendra votre site ?</label><br/>
                <input type="radio" name="pages" value="One page" onchange="seo('oui'); blog_vitrine('non')" /><label>Uniquement 1 page</label>
            <br/>
                <input type="radio" name="pages" value="Five pages" onchange="seo('non'); blog_vitrine('oui') "/><label>Entre 1 et 5 pages</label>
            <br />
                <input type="radio" name="pages" value="Ten pages" onchange="seo('non'); blog_vitrine('oui')"/><label>De 6 à 10 pages</label>*
            </span>
     
            <!-- question 2 si réponse e-commerce -->
            <span id="block_commerce">
            <label>Combien de pages contiendra votre site ?</label><br/>
            <input type="radio" name="pages" value="Five pages" />Entre 1 et 5 pages
            <br />
            <input type="radio" name="pages" value="Ten pages" />De 6 à 10 pages
            </span>
     
            <!-- question 3 si site vitrine et Une page -->
            <span id="block_seo">
            <label>Souhaitez-vous que l'on optimise le référencement de votre site pour qu'il soit plus visible sur les moteurs de recherche ?</label><br/>
            <input type="radio" name="seo" value="yes" />Oui
            <br/>
            <input type="radio" name="seo" value="no" />Non
            </span>
     
            <!-- question 3 si site vitrine et 1 à 10 pages -->
            <span id="block_blog">
            <label>Dans votre site, un espace "Blog" sera utile ?</label><br/>
            <input type="radio" name="blog" value="yes" />Oui
            <br/>
            <input type="radio" name="blog" value="no" />Non
            </span>
     
            <input type="submit" value="Envoyez" />
        </form>
     
     
    <!-- Fonctions JS -->
    <script>
        function aff_vitrine(action){
            if (action == "oui") {
                document.getElementById('block_vitrine').style.display="inline";
            }
            else {
                document.getElementById('block_vitrine').style.display="none";
            }
            return true;
        }
     
        function aff_commerce(action){
            if (action == "oui")  {
                document.getElementById('block_commerce').style.display="inline";
            }
            else {
                document.getElementById('block_commerce').style.display="none";
            }
            return true;
        }
     
        function seo(action){
            if (action == "oui")  {
                document.getElementById('block_seo').style.display="inline";
            }
            else {
                document.getElementById('block_seo').style.display="none";
            }
            return true;
        }
     
        function blog_vitrine(action){
            if (action == "oui")  {
                document.getElementById('block_blog').style.display="inline";
            }
            else {
                document.getElementById('block_blog').style.display="none";
            }
            return true;
        }
     
    </script>
    </body>
    </html>

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    1- déjà, dans un 1er temps, remplace ces balises <span> (par défaut "inline"*) par des balises <div> (par défaut "block").
    * un span n'est pas adapté pour entourer un "bloc".

    2- remplace le nom de la fonction seo() par aff_seo().
    Il semble que ce soit "seo" qui pose problème (mais je n'ai pas trouvé pourquoi, puisqu'il ne fait pas partie des "mots réservés")).

    3- il faut mettre les <label> AUTOUR des <input>, si tu veux qu'on puisse cocher les cases en cliquant sur les textes :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <label><input type="radio" name="pages" value="Five pages" onchange="aff_seo('non'); blog_vitrine('oui') "/> Entre 1 et 5 pages</label>
    Sinon, il faut identifier** chaque input et label (ce qui est plus fastidieux) :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <input type="radio" name="pages" value="Five pages" onchange="aff_seo('non'); blog_vitrine('oui') " id="id-radio-five-pages"/><label for="id-radio-five-pages"> Entre 1 et 5 pages</label>
    ** veux dire "de façon unique".

    4- Tes fonctions peuvent se simplifier en :
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
        function aff_vitrine(action){
                document.getElementById('block_vitrine').style.display = (action == "oui")? "inline" : "none";
        }
    N.B.
    • (conditon)? si_vrai : si_faux : il s'agit de l'"opérateur ternaire".
    • return true; n'a aucune utilité ici !
    • au lieu de "oui"/"non", 1/0 feraient aussi bien l'affaire !
    Dernière modification par Invité ; 04/11/2018 à 10h53.

  3. #3
    Nouveau membre du Club
    Femme Profil pro
    Journaliste - formateur web
    Inscrit en
    Octobre 2017
    Messages
    35
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Journaliste - formateur web
    Secteur : Enseignement

    Informations forums :
    Inscription : Octobre 2017
    Messages : 35
    Points : 37
    Points
    37
    Par défaut
    Un grand merci jreaux62 pour toutes ces informations et commentaires. Elles vont m'être bien utiles. Je comprends mieux d'où venait mon problème.
    Je mets en pratique tout de suite et te tiens au courant.
    A bientôt !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Conflit entre formulaire et javascript
    Par pontex dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 28/02/2011, 21h03
  2. Possibles conflits entre GL, GLAUX et GLUT
    Par barthelv dans le forum GLUT
    Réponses: 1
    Dernier message: 19/11/2004, 12h31
  3. Conflit entre bases de données
    Par BRODU dans le forum Bases de données
    Réponses: 4
    Dernier message: 18/10/2004, 11h40
  4. conflit entre couleurs
    Par khayyam90 dans le forum OpenGL
    Réponses: 2
    Dernier message: 03/07/2004, 18h00
  5. [Technique] Conflits entre plusieurs requêtes
    Par Neowile dans le forum Décisions SGBD
    Réponses: 3
    Dernier message: 24/03/2003, 09h37

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo