Mettre un formulaire dans une variable

Version imprimable

bonjour a tous.

je souhaiterais ajouter un formulaire en fonction du choix d'un utilisateur.

voici le formulaire

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<form id="rescue_pass" method="post">
    <div class="form-group">
        <select class="form-control" name="list_choise" id="list_choise">
            <option value="default" selected>Choisissez votre méthode de récupération</option>
            <option id="by_mail" value="by_mail">Par mail</option>
            <option id="by_key" value="by_key">Par clé de récupération</option>
        </select>
    </div>
 
    // code a ajouter
 
</form>

En fonction du choix de l'utilisateur je voudrais compléter le formulaire par

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<div class="form-group" id="divPseudo">
    <input type="text" placeholder="Entrez votre pseudo" id="rescue_pseudo" name="pseudo" maxlength="16" class="form-control" required/>
</div>
<div class="form-group" id="divMail">
    <input type="email" placeholder="Entrez votre email de secours" id="rescue_email" name="email" class="form-control" required/>
</div>
<div class="form-group form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
    <label class="form-check-label" for="exampleRadios2">
        <a href="#">J'accept les Conditions Générale</a>
    </label>
</div>
<div class="form-group">
    <input type="submit" id="sRescue_pass" class="btn btn-primary btn-block" value="Lancer la procédure" />
</div>

ou par

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<div class="form-group" id="divPseudo">
    <input type="text" placeholder="Entrez votre pseudo" id="rescue_pseudo" name="pseudo" maxlength="16" class="form-control" required/>
</div>
<div class="form-group" id="divKey">
    <input type="text" placeholder="Entrez votre clé de récupération" id="rescue_key" name="rescue_key" class="form-control" required/>
</div>
<div class="form-group form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
    <label class="form-check-label" for="exampleRadios2">
        <a href="#">J'accept les Conditions Générale</a>
    </label>
</div>
<div class="form-group">
    <input type="submit" id="sRescue_pass" class="btn btn-primary btn-block" value="Lancer la procédure" />
</div>

je pensais faire une fonction et mettre tout ça dans des variables du genre :

Code:

1
2
3
4
5
6
7
8
 
function by_mail(){
    var un = ' <div class="form-group" id="divPseudo">
        <input type="text" placeholder="Entrez votre pseudo" id="rescue_pseudo" name="pseudo" maxlength="16" class="form-control" required/>
      </div> ';
    var deux ='...';
    var trois = '...';
};

Mais cela ne fonctionne pas j'ai une erreur avec les variables.

Si quelqu'un peu m'orienter, merci d'avance.

bonne soirée.

Code:

1 2 3 var un = ' <div class="form-group" id="divPseudo"> <input type="text" placeholder="Entrez votre pseudo" id="rescue_pseudo" name="pseudo" maxlength="16" class="form-control" required/> </div> ';
Citation:

Envoyé par lifala

Mais cela ne fonctionne pas j'ai une erreur avec les variables.

En JavaScript, on ne peut pas faire de sauts de lignes dans les chaînes traditionnelles, celles délimitées par " ou par '. À la place il faut mettre des '\n'. Pour la lisibilité on peut séparer la chaîne en plusieurs morceaux, qu’on concatène avec +.
Code:

1 2 3 var un = ' <div class="form-group" id="divPseudo">\n' + '<input type="text" placeholder="Entrez votre pseudo" id="rescue_pseudo" name="pseudo" maxlength="16" class="form-control" required/>\n' + '</div> ';
Une autre solution est d’utiliser une syntaxe plus récente : les string templates (il n’y a toujours pas de nom français satisfaisant :aie:). Voir https://developer.mozilla.org/fr/doc...9raux_gabarits
Code:

1 2 3 var un = ` <div class="form-group" id="divPseudo"> <input type="text" placeholder="Entrez votre pseudo" id="rescue_pseudo" name="pseudo" maxlength="16" class="form-control" required/> </div> `;
Comme c’est une fonctionnalité récente (2015), elle n’est pas supportée par les anciens navigateurs, notamment Internet Explorer. Can I use template literals?

Avec un \ en fin de ligne ...

Code:

1
2
3
 var un = ' <div class="form-group" id="divPseudo">\
        <input type="text" placeholder="Entrez votre pseudo" id="rescue_pseudo" name="pseudo" maxlength="16" class="form-control" required/>\
      </div> ';

salut.

merci de vos réponses.

j'ai pu obtenir un bon résultat avec deux méthode proposé.

celle de Watilin:
Code:

1 2 3 4 var un = ' <div class="form-group" id="divPseudo">\n' + '<input type="text" placeholder="Entrez votre pseudo" id="rescue_pseudo" name="pseudo" maxlength="16" class="form-control" required/>\n' + '</div> ';
celle de SpaceFrog
Code:

1 2 3 4 var un = ' <div class="form-group" id="divPseudo">\ <input type="text" placeholder="Entrez votre pseudo" id="rescue_pseudo" name="pseudo" maxlength="16" class="form-control" required/>\ </div> ';
j'ai testé avec les deux impeccable j'ai pu créer mes variable.

merci a vous a bientot ;)