Discussion :

[theo16]

Bonjour,
Dans un formulaire HTML j'ai des boutons type radio où je voudrais qu'en fonction du résultat s'affiche une ligne supplémentaire de saisie.

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
 
<form action="/Test_affichage_ligne.php" method="post">
En avez vous entendu parler ? 
<input id=ajout type=radio name=option value=oui> Oui 
<input id=ajout type=radio name=option value=non> Non<br>
</form>	
 
<script type="text/javascript" src="/JsQuery/jquery_dev/jquery-v1.9.1.js"></script>
<script type="text/javascript" src="/JsQuery/jquery_dev/jquery-ui.js"></script>
<script>
$(function() {
  var valeur = $('input[type=radio][name=option]:checked').val(); 
   if (valeur == "oui") {
      $("#ajout").append("De quelle manière ? <input type=text name=maniere><br>");
   }
});
</script>

Voilà j'affiche bien mes boutons, mais quand je clique sur Oui, rien ne se passe, je n'affiche pas la ligne de l'append du jquery.
J'ajoute que les src jquery...js sont bien au bon endroit sur mon disque.
Pouvez vous me dire mon erreur ?
Merci d'avance.

[danielhagnoul]

1) Un ID doit être unique dans la page web
2) Pour intercepter un événement, il faut écrire un gestionnaire d'événement

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<form id="myForm">
  En avez vous entendu parler ? 
  <input type="radio" name="option" value="oui"> Oui 
  <input type="radio" name="option" value="non"> Non
</form>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
  "use strict";
 
  $( function(){ // forme abrégée de $(document).ready( function( ){
 
    $( 'input[type=radio][name=option]').on( "change", function( e ){
      if ( $( this ).val() == "oui" ) {
        $( "#myForm" ).append( '<br/>De quelle manière ? <input type="text" name="maniere">' );
      }
    });
 
  });
</script>

[theo16]

Bonjour,

Merci de la réponse.
J'ai modifié le html avec l'id sur un div spécifique au bouton radio, car j'aurai peut être besoin d'un autre id dans la form.

Et çà marche, merci beaucoup.
Bonne journée.