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

[danielhagnoul]

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.

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

Bonsoir

Avoir inclus "Mlle" dans la condition "if" est une erreur. Comme excuse, je dirai que j'ai d'autres tracas, que j'ai des problèmes avec les yeux et que ma santé n'est pas très bonne en ce moment.

Il serait logique de tester le code proposé avant de protester. Les expressions "je veux" et "il me faut" sont inappropriées. Les bénévoles apportent une aide pour vaincre un point de blocage dans un code, pas pour écrire ce code à votre place.

Débutant ou non en jQuery, vous devez être capable de tester et de transformer une proposition de code pour y changer un point de détail (position d'un élément dans le code, élément hidden ou condition "if").