Formulaire dynamique en JS

**Makhapi** · 15/10/2012, 20h29

Bonjour,

Avez-vous des idées pour construire un formulaire où les questions s'affichent en fonction des réponses de l'utilisateur? je m'explique. Au début la page contient une seule question avec des cases à cocher ou autre... Au moment où l'utilisateur répond, la question suivante apparait et diffère selon la réponse. Le tout contenu dans un tableau html de type <table>
Merci

**headmax** · 15/10/2012, 20h59

Salut, j'ai pas tout compris.

Tu veux faire tout dans un tableau?

Un formulaire qui englobe ton tableau et dans ton tableau des elements du formulaires (inputs,select,textarea...).

Ca manque cruellement de précision, un début de script serait plus adapté, ou alors il faudra plus détailler ton soucis, si tu souhaite avoir de l'aide.

**andry.aime** · 16/10/2012, 05h55

Bonjour,

Il y a pas de discussions résolues sur ce forum et la rubrique Ajax. Essaie de faire une petite recherche.

A+.

**Watilin** · 16/10/2012, 10h44

Envoyé par Makhapi

Le tout contenu dans un tableau html de type <table>

Tu ne comptes pas utiliser ce tableau pour faire ta mise en page, j'espère ?

**Makhapi** · 16/10/2012, 20h44

Je souhaite établir un tableau contenant des éléments de formulaires. Chaque case contenant une queston et des composants de formulaires. Javascript ne suffit-il pas? Dois-je obligatoirement utiliser Ajax?

**Watilin** · 17/10/2012, 20h41

Oui, il faudra utiliser Ajax. Mais derrière ce nom qui peut faire peur, se cache simplement un peu de code JavaScript, dont la seule difficulté est cette histoire de fonctions de rappel.

Pour revenir sur cette histoire de tableaux, j'ai bel et bien l'impression que tu comptes t'en servir uniquement pour ta mise en forme, et c'est déconseillé pour tout un tas de raisons. Je pense que tu pourrais utiliser des éléments <fieldset> et les mettre en forme avec un peu de CSS.

Comme l'a dit Andry, ton projet est assez classique. Fais quelques recherches sur le Net

**sevine06** · 18/10/2012, 00h22

Pas forcément besoin d'AJAX s'il connaît toutes les réponses possibles à l'avance...

Cache tes TR (display: none;) et tu les affiches (display: table-row;) en fonction des résultats précédents !

**Makhapi** · 22/10/2012, 12h20

Ca m'a l'air intéressant ce "display". Merci Sevine

**Makhapi** · 27/10/2012, 19h02

Toujours pas résolu pour ma part! Je penses être sur le bonne voie avec l'ajout d'un CSS pour initialiser mes questions en "caché" mais je n'arrive toujours pas à les apparaitre avec une fonction javascript. Voici mon code :

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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SIRIUS</title>
<style>
#pNonHab {display:none;}
</style>
<script>
function acces(){
        document.getElementById("pNonHab").style.display="inline";
}
</script>
</head>
 
<body>
<table border ="3">
<tr>
<td width="800" valign="top">
<h1>Procédure SIRIUS</h1>
<form>
<p>S'agit-il d'une demande d'accès?
<input type='radio' name='acces' value='oui' onclick="acces()"/>oui
<input type='radio' name='acces' value='non' onclick='nonacces()' />non</p>
<p id="pNonHab">Le demandeur est-il habilité?
<input type='radio' name='acces' value='oui' onclick='hab()'/>oui
<input type='radio' name='acces' value='non' onclick='nonhab()' />non</p>
</form>
</td>
<td rowspan="20"><p>futur tableau</p><p>futur tableau</p><p>futur tableau</p><p>futur tableau</p><p>futur tableau</p><p>futur tableau</p><p>futur tableau</p><p>futur tableau</p><p>futur tableau</p><p>futur tableau</p><p>futur tableau</p><p>futur tableau</p><p>futur tableau</p>
</td>
</tr>
</table>
</body>
</html>

Je voudrais faire apparaitre la deuxieme question en cliquant sur la case oui (en restant sur la même page) mais ça ne fonctionne pas!!! C'est urgent... Merci encore pour vos réponses

**Makhapi** · 28/10/2012, 21h13

J'ai trouvé ce qui n'allait pas : la balise <form> empêchait le #nonhab {display} de passer de "none" à "inline" alors que les autres balises telles que <table> ou <p> ne semblent pas poser de problème. En supprimant <form> mes blocs apparaissent.

Formulaire dynamique en JS

JavaScript

Discussions similaires

Partager

Partager