Discussion :

[afibase]

bonjour,
Je suis toujours de niveau initié.
Voila mon idée, je voudrais construire ce formulaire:

Code :

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

1
2
3
4
5
6
7
8
9
 
<form name="creer_dossier" action="creer_dossier.php" method="POST">
  <label for="civilité" class="label">Civilité</label>
    <select name="titre" id="titre">
      <option value="Mr">Mr</option>
      <option value="Mlle">Mlle</option>
     <option value="Mme">Mme</option>
  </select>
</form>

si l'option "Mme" est sélectionnéé, je demande à jquery de m'afficher l' input suivant pour saisir le nom de jeune fille de Mme:

Code :

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

1
2
 
nom de jeune fille <input type="text" name="nom_jeune_fille">

J'ai essayé ce code:

Code :

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

1
2
3
4
 
$('#titre').change(function() {
$('#titre').html('<input type="text" name="nom_jeune_fille">');
});

et bien d'autres encore, mais rien ne fonctionne. Je demande de l'aide ! Merci!!!!

[danielhagnoul]

Bonsoir

Exemple :

Code CSS :

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

.labelNomJeuneFille { display: none; margin-left: 6px; }

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
<form name="creer_dossier">
    <label for="civilité" class="label">Civilité</label>
    <select name="titre" id="titre">
        <option value="Mr">Mr</option>
        <option value="Mlle">Mlle</option>
        <option value="Mme">Mme</option>
    </select>
    <label class="labelNomJeuneFille">Nom de jeune fille : <input type="text" name="nom_jeune_fille"></label>
    <input type="submit" value="Go">
</form>

Code JS :

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
$( function(){ // forme abrégée de $(document).ready(function(){
 
    var nomJeuneFille = "inconnu",
        jObjInputNomJeuneFille = $( "input[name='nom_jeune_fille']" ),
        jObjTitre = $( "#titre" );
 
    jObjInputNomJeuneFille.on( "change", function(){
        nomJeuneFille = jObjInputNomJeuneFille.val();
    });
 
    jObjTitre.on( "change", function(){
        var str = jObjTitre.val();
 
        if ( str === "Mlle" || str === "Mme" ){
            $( ".labelNomJeuneFille" ).css( "display", "inline-block" );
            jObjInputNomJeuneFille.focus();
        }
    });
 
    $( "form[name='creer_dossier']" ).on( "submit", function(){
 
        // debug, console, touche F12
        console.log( jObjTitre.val(), nomJeuneFille );
 
        // stop la soumission du formulaire si false
        return false;
    });
 
});

[afibase]

merci pour ta réponse. Peux tu m'expliquer le déroulé du script plus clairement!!

[afibase]

j'essaye d'e comprendre.
Moi, je ne veux pas dans un premier temps que l'imput

Code :

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

<label class="labelNomJeuneFille">Nom de jeune fille : <input type="text" name="nom_jeune_fille"></label>

figure dans mon <form>. C'est en sélectionnant l'option "Mme" qu'il doit apparaitre dans le formulaire et seulement à cette condition.

[micetf]

Bonjour,

Moi, je ne veux pas dans un premier temps que l'imput

Code :

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

<label class="labelNomJeuneFille">Nom de jeune fille : <input type="text" name="nom_jeune_fille"></label>

figure dans mon <form>.

C'est le pourquoi du CSS :

Code css :

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

.labelNomJeuneFille { display: none; margin-left: 6px; }

Dans un premier temps, cet input n'est pas visible.

=========================================================

C'est en sélectionnant l'option "Mme" qu'il doit apparaitre dans le formulaire et seulement à cette condition.

Ce n'est que lorsque l'option sélectionnée change (événement "change" sur #titre) que cet input est rendu visible :

Code js :

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

1
2
3
4
5
6
7
8
9
 
jObjTitre.on( "change", function(){
        var str = jObjTitre.val();
 
        if ( str === "Mlle" || str === "Mme" ){
            $( ".labelNomJeuneFille" ).css( "display", "inline-block" ); // <----- L'input est rendu visible
            jObjInputNomJeuneFille.focus();
        }
    });

Fred

[afibase]

ok j'ai pris note et ça fonctionne merci à tout les 2.
J'ai cependant rectifié la condition if, afin que le label et l'input soit aligner et visible

Code :

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

1
2
3
4
5
6
7
8
 
---
if ( str === "Mme" ) 
{
$( ".labelNomJeuneFille" ).css( "display", "inline-block" );
$( ".Fille" ).css( "display", "inline-block" );
jObjInputNomJeuneFille.focus();
}