Formulaire dynamique en JS

Version imprimable

15/10/2012, 20h29
Makhapi

Formulaire dynamique en JS

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
15/10/2012, 20h59
headmax

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.
16/10/2012, 05h55
andry.aime

Bonjour,

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

A+.
16/10/2012, 10h44
Watilin

Citation:

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 ?
16/10/2012, 20h44
Makhapi

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?
17/10/2012, 20h41
Watilin

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 ;)
18/10/2012, 00h22
sevine06

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 !
22/10/2012, 12h20
Makhapi

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

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:

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

28/10/2012, 21h13
Makhapi

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.