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 :

[DOM] Erreur suite à l'ajout d'élément HTML


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Profil pro
    Inscrit en
    Septembre 2007
    Messages
    450
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2007
    Messages : 450
    Par défaut [DOM] Erreur suite à l'ajout d'élément HTML
    bonjour, j'ai un code a realiser sur cette page http://discodrive.fr/reservation_nuit_du_bois.php

    les gens doivent choisir entre aller-retour aller simple ou retour simple, en cliquant sur l'un d'eux, les option en dessous devraient s'afficher, mais sa s'affiche pas, pourquoi ?

    Voici mon code ...

    javascript dans le head :
    Code : 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
     
    <script language="javascript">
    function ar() {
    document.getElementById('aller').innerHTML = '  <input type="radio" name="lieu" value="1" onclick="heure1()" />H&ocirc;tel IBIS - Nantes Centre<br />
    												<input type="radio" name="lieu" value="2" onclick="heure2()" />H&ocirc;tel IBIS - Nantes Gare Sud<br />
    												<input type="radio" name="lieu" value="3" onclick="heure3()" />H&ocirc;tel FORMULE 1 - Ste Luce sur Loire<br />
    												<input type="radio" name="lieu" value="4" onclick="heure4()" />ETAP H&ocirc;tel - Ste Luce sur Loire<br />
    												<input type="radio" name="lieu" value="5" onclick="heure5()" />H&ocirc;tel CAMPANILE - Ste Luce sur Loire<br />
    												<input type="radio" name="lieu" value="6" onclick="heure6()" />H&ocirc;tel IBIS - Nantes La Beaujoire<br />
    												<input type="radio" name="lieu" value="7" onclick="heure7()" />WESTOTEL - La Chapelle sur Erdre<br />';
     
    document.getElementById('retour').innerHTML = ' <select name="retour">
    												<option value="1h00">1h00</option>
    												<option value="2h30">2h30</option>
    												<option value="4h00">4h00</option>
    												</select>';		
     
    }
    function a() {
    document.getElementById('aller').innerHTML = '<input type="radio" name="lieu" value="1" onclick="heure1()" />H&ocirc;tel IBIS - Nantes Centre<br />
    												<input type="radio" name="lieu" value="2" onclick="heure2()" />H&ocirc;tel IBIS - Nantes Gare Sud<br />
    												<input type="radio" name="lieu" value="3" onclick="heure3()" />H&ocirc;tel FORMULE 1 - Ste Luce sur Loire<br />
    												<input type="radio" name="lieu" value="4" onclick="heure4()" />ETAP H&ocirc;tel - Ste Luce sur Loire<br />
    												<input type="radio" name="lieu" value="5" onclick="heure5()" />H&ocirc;tel CAMPANILE - Ste Luce sur Loire<br />
    												<input type="radio" name="lieu" value="6" onclick="heure6()" />H&ocirc;tel IBIS - Nantes La Beaujoire<br />
    												<input type="radio" name="lieu" value="7" onclick="heure7()" />WESTOTEL - La Chapelle sur Erdre<br />';
    }
    function r() {
    document.getElementById('retour').innerHTML = '<select name="retour">
    												<option value="1h00">1h00</option>
    												<option value="2h30">2h30</option>
    												<option value="4h00">4h00</option>
    												</select>';
    }
    function heure1() {
    document.getElementById('heure').innerHTML = '<input type="radio" name="heure_depart" value="17h00" /> 17h00 <br /><input type="radio" name="heure_depart" value="19h40" /> 19h40 <br /><input type="radio" name="heure_depart" value="21h45" /> 21h45 <br />';
    }
    function heure2() {
    document.getElementById('heure').innerHTML = '<input type="radio" name="heure_depart" value="17h15" /> 17h15 <br /><input type="radio" name="heure_depart" value="19h55" /> 19h55 <br /><input type="radio" name="heure_depart" value="22h00" /> 22h00 <br />';
    }
    function heure3() {
    document.getElementById('heure').innerHTML = '<input type="radio" name="heure_depart" value="17h45" /> 17h45 <br /><input type="radio" name="heure_depart" value="20h25" /> 20h25 <br /><input type="radio" name="heure_depart" value="22h20" /> 22h20 <br />';
    }
    function heure4() {
    document.getElementById('heure').innerHTML = '<input type="radio" name="heure_depart" value="18h00" /> 18h00 <br /><input type="radio" name="heure_depart" value="20h30" /> 20h30 <br /><input type="radio" name="heure_depart" value="22h35" /> 22h35 <br />';
    }
    function heure5() {
    document.getElementById('heure').innerHTML = '<input type="radio" name="heure_depart" value="18h10" /> 18h10 <br /><input type="radio" name="heure_depart" value="20h40" /> 20h40 <br /><input type="radio" name="heure_depart" value="22h45" /> 22h45 <br />';
    }
    function heure6() {
    document.getElementById('heure').innerHTML = '<input type="radio" name="heure_depart" value="18h30" /> 18h30 <br /><input type="radio" name="heure_depart" value="20h55" /> 20h55 <br /><input type="radio" name="heure_depart" value="22h55" /> 22h55 <br />';
    }
    function heure7() {
    document.getElementById('heure').innerHTML = '<input type="radio" name="heure_depart" value="18h50" /> 18h50 <br /><input type="radio" name="heure_depart" value="21h05" /> 21h05 <br /><input type="radio" name="heure_depart" value="23h05" /> 23h05 <br />';
    }
    </script>
    et le html :
    Code : 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
    <form method="post" action="" name="formulaire">
    <table>
    <tr><th>Vous prendrez notre car pour *&nbsp;&nbsp;&nbsp;<br /><br /></th><td><input type="radio" name="trajet" value="ar" onclick="ar()" />Aller et retour <input type="radio" name="trajet" value="a" onclick="a()" />All&eacute; simple <input type="radio" name="trajet" value="r" onclick="r()" />Retour simple</td></tr>
    <tr><th>D&eacute;part de &nbsp;&nbsp;&nbsp; <br /><br /></th>
    	<td id="aller">
    		
    		<br /><br />
    	</td>
    </tr>
    <tr><th>heure de d&eacute;part &nbsp;&nbsp;&nbsp; <br /><br /></th>
    	<td id="heure">
    		<br /><br />
    	</td>
    </tr>
    <tr><th>heure de retour &nbsp;&nbsp;&nbsp; <br /><br /></th>
    	<td id="retour">
    	<br /><br />
    	</td>
    </tr>
    <tr><th>* : <br /><br /></th><td>Champs obligatoires !<br /><br /></td></tr>
    </table>
    <br />
    <div class="scroll">
    <?php
    $termes=mysql_query("SELECT * FROM nav_termes_ndb WHERE id='1'");
    $t=mysql_fetch_assoc($termes);
    
    $sujet=nl2br($t['content']);
    $deco=array(""=>"<b>",""=>"</b>",""=>"<u>",""=>"</u>",""=>"<i>",""=>"</i>","[hr]"=>"<hr />",""=>"<s>",""=>"</s>","[img]"=>"<img src='","[/img]"=>"' />");
    $sujet=strtr($sujet,$deco);
    $sujet=preg_replace('#\[h(.*)\](.*)\[/h(.*)\]#Usi','<h$1>$2</h$3>',$sujet);
    $sujet=preg_replace('#\[color=(.*)\](.*)\[/color\]#Usi','<span style="color:$1;">$2</span>',$sujet);
    $sujet=preg_replace('#\[img\](.*)\[/img\]#Usi','<img src="$1" />',$sujet);
    $sujet=preg_replace('#\[url=(.*)\](.*)\[/url\]#Usi','<a href="$1" style="text-decoration:none;">$2</a>',$sujet);
    
    echo $sujet;
    ?>
    
    </div>
    <br />
    <input type="checkbox" name="termes" /> En cochant cette case, j' acc&egrave;pte les termes et conditions mentionn&eacute;es ci-dessus !
    <br /><br />
    <div align="center"><input type="reset" value="remettre &agrave; z&eacute;ro" /> | <input type="submit" name="enreg" value="envoyer" /></div>
    </form>
    Quand je cliques sur aller et retour ou aller simple ou retour simple sa m'affiche rien en dessous, pourriez vous m'aider, merci beaucoup par avance

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    Il faut eviter d'insérer des objets sur une page en collant simplement leur code HTML ...
    Renseigne toi sur le DOM
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.createElement('...')
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre Expert
    Avatar de RomainVALERI
    Homme Profil pro
    POOête
    Inscrit en
    Avril 2008
    Messages
    2 652
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : POOête

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 652
    Par défaut
    Oui, innerHTML pose beaucoup de problèmes, notamment sous IE, et notamment avec les éléments de formulaire, et tu n'es pas le seul à rencontrer ce genre de soucis...
    La bonne solution est celle évoquée par SpaceFrog :
    - createElement
    - setAttribute
    - appendChild
    - café très fort ^^

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    on peut ajouter à la liste:
    - un tour dans les contributions :http://www.developpez.net/forums/d53...ynamique-form/
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Membre éclairé
    Profil pro
    Inscrit en
    Septembre 2007
    Messages
    450
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2007
    Messages : 450
    Par défaut
    j'ai essayé de remplacer mes innerHTML = '...'; par des createElement ('...');
    Mais sa marche pas non plus

    Merci quand meme et désolé je n'y connais malheureusement rien en javascript

  6. #6
    Membre Expert
    Avatar de RomainVALERI
    Homme Profil pro
    POOête
    Inscrit en
    Avril 2008
    Messages
    2 652
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : POOête

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 652
    Par défaut
    Rassure-moi, tu n'as pas inséré ton html directement dans createElement(...), hein ? ^^
    Parce que si c'est le cas c'est plutôt mal barré...
    En tout cas dans le doute inspire-toi de l'excellent lien proposé par SpaceFrog.

  7. #7
    Membre éclairé
    Profil pro
    Inscrit en
    Septembre 2007
    Messages
    450
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2007
    Messages : 450
    Par défaut
    arf si pourquoi ? vraiement desolé
    Alors comment devrait se presenter mon code ? enfaite j'ai essayé de regarder les codes proposés dans le lien mais j'y comprends rien

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

Discussions similaires

  1. Ajouter un élément html grâce au CSS
    Par _jey_ dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 14/04/2009, 17h43
  2. [DOM] Ajout d'élément à un fichier XML
    Par pierre24 dans le forum Bibliothèques et frameworks
    Réponses: 11
    Dernier message: 04/03/2008, 15h21
  3. [DOM] dom d'éléments html
    Par Invité dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 08/11/2007, 22h41
  4. [JavaScript] [DOM] Ajout d'éléments à un élément parent.
    Par yjuliet dans le forum Contribuez
    Réponses: 10
    Dernier message: 03/07/2007, 12h55
  5. [DOM]Récupére la valeur d'un élément HTML
    Par kobe dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 27/06/2006, 20h18

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