Insérer <INPUT> sous condition Jquery

Version imprimable

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

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:

1 2 nom de jeune fille <input type="text" name="nom_jeune_fille">
J'ai essayé ce code:
Code:

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!!!!

Bonsoir

Exemple :

Code:

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

Code:

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:

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

20/08/2014, 15h50
afibase

merci pour ta réponse. Peux tu m'expliquer le déroulé du script plus clairement!!
20/08/2014, 17h31
afibase

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

Code:

<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.

Bonjour,

Citation:

Envoyé par afibase

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

Code:

<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:

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

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

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

Citation:

Envoyé par afibase

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:

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

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:

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

21/08/2014, 22h45
danielhagnoul

Citation:

Envoyé par afibase

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

Code:

<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.

Citation:

Envoyé par 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

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").