Créer un formulaire dynamique en javascript

Version imprimable

09/01/2015, 11h48
jojo perpedu

Créer un formulaire dynamique en javascript

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 .
09/01/2015, 12h01
SpaceFrog

http://www.developpez.net/forums/d53...ynamique-form/
09/01/2015, 17h08
jojo perpedu

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 .
10/01/2015, 11h25
lysandro

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.
10/01/2015, 12h14
jojo perpedu

LISANDRO

Donne moi le script javascript . Merci d'avance.
11/01/2015, 10h40
sekaijin

tu veux pas qu'on vienne faire ton boulot ?

sekaijin résume assez mon état d'esprit. J'ajouterai :P 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:

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:

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>

11/01/2015, 16h27
NoSmoking

Bonjour,
je profite de cette discussion pour placer Galerie au clic sans JavaScript \:mrgreen:/ 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.