Créer un formulaire dynamique en javascript

**jojo perpedu** · 09/01/2015, 11h48

bonjour à tous quelqu'un peut-il m'aider ??? . je veux crée un formulaire d'inscription qui permet l'inscription de trois type de personnes . A l' affichage du formulaire l'utilisateur sélectionne son type puis son formulaire à lui s'affiche . notons que ses trois type ont des formulaires différents . comment gérer ça avec un script JS .

**SpaceFrog** · 09/01/2015, 12h01

http://www.developpez.net/forums/d53...ynamique-form/

**jojo perpedu** · 09/01/2015, 17h08

pfff excuser moi mais je suis un débutant en java script . ce code que j'ai regardé est trop flou , j'ai juste besoin d'un bout de code bien spécifique .

**lysandro** · 10/01/2015, 11h25

Eventuellement une option pourrait-être d'écrire dans ta page tous les formulaires dont tu as besoin. De les cacher, avec une propriété (ou une classe) css 'display:none'. Ajouter une balise select, en dehors, dans laquelle l'utilisateur saisit son type, et sur l'évenement 'change' ('onchange') du select déclencher une petite fonction javascript qui se contente de faire un 'display:block' (ou utiliser une classe css) sur le formulaire correspondant au type saisi.

**jojo perpedu** · 10/01/2015, 12h14

Donne moi le script javascript . Merci d'avance.

**sekaijin** · 11/01/2015, 10h40

tu veux pas qu'on vienne faire ton boulot ?

**lysandro** · 11/01/2015, 12h29

sekaijin résume assez mon état d'esprit. J'ajouterai

qu'utiliser un impératif pour une demande n'est pas la meilleure façon d'obtenir une réponse.

Toutefois, et parce que d'autres peuvent être intéressés, il est possible de se passer de javascript.

Avec ce que j'ai lu là dedans et là dedans, on peut utiliser des input type=radio, partageant le même attribut name, associés à une pseudo-class css :checked et à l'opérateur de composition ~.

Un exemple minimaliste pourrait-être :

Code html :

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
30
31
32
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .displayondemand { display:none; }
            #showForm1:checked ~ #form1 { display: block; }
            #showForm2:checked ~ #form2 { display: block; }
        </style>
    </head>
    <body>
        <input id=showForm1 name=showForm type=radio>Formulaire 1
        &nbsp;
        <input id=showForm2 name=showForm type=radio>Formulaire 2
 
        <form id=form1 class="displayondemand">
            <label>form1:text1</label>
            <input name=text1 type=text value="">
            <br>
            <input type=submit value=Valider>
            <input type=reset  value=Annuler>
        </form>
 
        <form id=form2 class="displayondemand">
            <label>form2:text1</label>
            <input name=text1 type=text value="">
            <input type=submit value=Valider>
            <input type=submit value=Annuler>
        </form>
    </body>
</html>

On peut "améliorer" la présentation, en rajoutant des labels et en masquant les boutons radio :

Code html :

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
30
31
32
33
34
35
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .nodisplay, .displayondemand { display:none; }
            #showForm1:checked ~ #form1 { display: block; }
            #showForm2:checked ~ #form2 { display: block; }
            input[name=showForm]:checked + label { text-decoration: underline; }
        </style>
    </head>
    <body>
        <input  id=showForm1 name=showForm type=radio class="nodisplay">
        <label for=showForm1>Formulaire 1</label>
        &nbsp;
        <input  id=showForm2 name=showForm type=radio class="nodisplay">
        <label for=showForm2>Formulaire 2</label>
 
        <form id=form1 class="displayondemand">
            <label>form1:text1</label>
            <input name=text1 type=text value="">
            <br>
            <input type=submit value=Valider>
            <input type=reset  value=Annuler>
        </form>
 
        <form id=form2 class="displayondemand">
            <label>form2:text1</label>
            <input name=text1 type=text value="">
            <input type=submit value=Valider>
            <input type=submit value=Annuler>
        </form>
    </body>
</html>

**NoSmoking** · 11/01/2015, 16h27

Bonjour,
je profite de cette discussion pour placer Galerie au clic sans JavaScript \

/ qui utilise l'approche faite par lysandro même si je pense que jojo perpedu pourrait faire un effort minimum de recherche, ce n'est pas les réponses qui manquent.

Créer un formulaire dynamique en javascript

JavaScript

Discussions similaires

Partager

Partager