[DOM] création d'un formulaire via javascript et envoi des données

**Adrilo** · 31/03/2009, 11h28

Bonjour à tous!

Je me permet de demander votre aide sur un petit formulaire que je suis en train de faire :

Code :

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">    
	<head>
		<meta http-equiv="Content-Type"  content="text/html;charset=utf-8" /> 
		<link rel="stylesheet" media="screen" type="text/css" title="style" href="style.css" />
		<title>Ajout</title>
		<script type="text/javascript" >
			function genereForm()// génère le formulaire correspondant au choix du menu
			{
				if(document.getElementById('cat').value == "film")
				{	
					document.getElementById('formulaire').innerHTML = "";
					document.getElementById('formulaire').innerHTML = document.getElementById('formulaire').innerHTML + '<fieldset><legend>Critères</legend><label for="titre">Titre : </label><input type="text" id="titre" size="30" maxlength="30" /><br/><label for="realisateur">Réalisateur : </label><input type="text" id="auteur" size="30" maxlength="30"/><br/><label for="critique">Critique : </label><textarea id="critique" cols="30" rows="4" ></textarea></fieldset>';
					document.getElementById('boutons').innerHTML = "";
					document.getElementById('boutons').innerHTML = document.getElementById('boutons').innerHTML + '<input type="submit" name="ajout" value="Ajouter" /><input type="reset" name="reset" value="Effacer" />';
				}
				if(document.getElementById('cat').value == "jeu")
				{
					document.getElementById('formulaire').innerHTML = "";
					document.getElementById('formulaire').innerHTML = document.getElementById('formulaire').innerHTML + '<fieldset><legend>Critères</legend><label for="titre">Titre : </label><input type="text" id="titre" size="30" maxlength="30" /><br/><label for="developpeur">Développeur : </label><input type="text" id="auteur" size="30" maxlength="30"/><br/><label for="critique">Critique : </label><textarea id="critique" cols="30" rows="4" ></textarea></fieldset>';
					document.getElementById('boutons').innerHTML = "";
					document.getElementById('boutons').innerHTML = document.getElementById('boutons').innerHTML + '<input type="submit" name="ajout" value="Ajouter" /><input type="reset" name="reset" value="Effacer" />';
				}
				if(document.getElementById('cat').value == "livre")
				{
					document.getElementById('formulaire').innerHTML = "";
					document.getElementById('formulaire').innerHTML = document.getElementById('formulaire').innerHTML + '<fieldset><legend>Critères</legend><label for="titre">Titre : </label><input type="text" id="titre" size="30" maxlength="30" /><br/><label for="auteur">Auteur : </label><input type="text" id="auteur" size="30" maxlength="30"/><br/><label for="critique">Critique : </label><textarea id="critique" cols="30" rows="4" ></textarea></fieldset>';
					document.getElementById('boutons').innerHTML = "";
					document.getElementById('boutons').innerHTML = document.getElementById('boutons').innerHTML + '<input type="submit" name="ajout" value="Ajouter" /><input type="reset" name="reset" value="Effacer" />';
				}
			}
		</script>
	</head>
	<body>     
		<h1>Ajout</h1>
		<form id="ajout" action="ajout.php" method="post">
			<fieldset>
				<legend>Catégorie</legend>
				<p>
					<select id="cat" onchange="genereForm();" >
						<option disabled="disabled" selected="selected">Choisissez une catégorie</option>
						<option value="film">Film</option>
						<option value="jeu">Jeu vidéo</option>
						<option value="livre">Livre</option>
					</select>
				</p>
			</fieldset>
			<div id="formulaire">
			</div>
			<div id="boutons">
			</div>
		</form>
	</body>
</html>

Dans cette page, le but est de générer un formulaire selon le choix qu'effectue l'utilisateur dans le menu déroulant.
L'utilisateur remplit ensuite le nouveau formulaire et clique sur ajouter pour ajouter les infos à la base de données

Le problème est que les formulaires se génèrent correctement, mais je ne parviens pas à récuperer les données qui sont ensuite entrées dans ce nouveau formulaire.
D'après MySQL, il y a un problème avec les variables $_POST['titre'], $_POST['auteur'] et $_POST['critique'].

Je voudrais donc savoir si cela provient d'une erreur dans la façon de générer mes formulaires ou si c'est autre chose.
Je précise que pour l'instant je début en javascript.

Merci d'avance de vos réponses

Adrilo

**SpaceFrog** · 31/03/2009, 11h33

le prototype de ce qui est déconseillé en matière de creation d'objets et particulièrement de d'objets formulaires: innerHTML...
LA raison en est que les objest créés avec innerHTML sont ensuite mal gérés par le DOM.

un peu de lecture:
http://www.developpez.net/forums/d53...ynamique-form/

**Adrilo** · 31/03/2009, 12h14

OK Merci pour les infos!

Je connais assez mal le DOM, étant encore débutant en javascript.
Je vais étudier tout ça!

[DOM] création d'un formulaire via javascript et envoi des données

JavaScript

Discussions similaires

Partager

Partager