ajouter des champs dynamiquement en javascript

**ncheboi** · 10/03/2010, 13h18

Bonjour. Je suis débutant en javascript mais j'ai une bonne connaissance des notions d'objets. Je souhaite pouvoir rajouter des champs à un formulaire de saisies de données. Voici mon code:

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
 
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
	<head>
    	<title>ChoosIt</title>
		<link rel="stylesheet" href="css/style.css" />
		<link rel="shortcut icon" href="imgs/aimant.ico" />
		<script type="text/javascript">
			function ajout(){
				 creneau.innerHTML +="<td>Ligne <input type='text' name='txt' /></td>";
			}
		</script>
	</head>
 
	<body>		
		<div id="banniere_haut">
 
		</div>
 
		<div id="news"> Gestion des Evénements </div>	
 
		<div id="menu">
			<ul id="menu" ><li><a href = "logged.php"> Accueil </a></li><li><a class = "selected" href = " events.php "> Evénements </a></li><li><a href = "index.php"> Me déconnecter </a></li><li><a href = "profil_logged.php"> Mon profil </a></li></ul>		</div>
 
		<div id="corps">
 
		<table><form method="post" action=creer_creneau.php name = creneau><p id="nom_creneau"> Créneau 1 </p><tr>
					<th> Date </th>
					<td> <input type=date name=date_1  /></td>
				</tr><tr>
 
					<th> Heure début </th>
					<td> <input type=time name=heure_debut_1  /></td>
				</tr><tr>
					<th> Heure fin </th>
					<td> <input type=time name=heure_fin_1  /></td>
				</tr><td><input type="button" value= "ajouter créneau" onclick="ajout();"/></td>
<td><input type="submit" value="Créer créneau !"/></td> </form></table></div><div id="pied_page">
 
	Site codé en PHP, XHTML et CSS.
</div>
 
  </body>
</html>

Je veux que le bouton ajouter créneau me génere un autre champ de mon formulaire (pour le moment je ne l'ai pas encore édité comme il faut, c'est juste un test) mais il ne marche pas.
Est-ce que j'ai fait une erreur quelquepart?

**E.Bzz** · 10/03/2010, 13h51

Bonjour,
pour ajouter un élément dans une page, en plus du innerHTML, il y a le DOM, solution généralement recommandée (attention à l'attribution du name qui pose problème; sujet abordé sur le forum => une chtite recherche).

Par contre, ce qui va te poser problème (en fait je pense que c'est déjà le problème), c'est plutôt l'ajout d'un <td> dans ton tableau existant : tu rends sa structure incohérente car le nombre de cellules n'est plus le même que sur les autres lignes. Suivant la structure actuelle de ton tableau, tu peux soit créer d'emblée la colonne supplémentaire en la masquant au départ et en ne l'affichant que lors de l'ajout du champ (mais dans ce cas autant avoir créé le champ à l'avance, ce qui simplifie l'ensemble), soit modifier le colspan des autres lignes lors de l'ajout de la nouvelle cellule pour conserver une structure d'ensemble correcte ...

EDIT : petite rectification : ta structure de tableau est déjà incohérente

il ne faut pas insérer les tags <form> et </form> au milieu de la structure de la <table> ==> <form> avant <table> et </form> après </table>
il manque des balises (</tr>)
je ne pense pas qu'on puisse mélanger <th> et <td> sur une même ligne. En tous cas ce n'est pas cohérent (<th> = header et <td> = data)

A+

**E.Bzz** · 10/03/2010, 13h53

... une autre solution plus moderne et moins génératrice de complication est de te passer définitivement des tableaux pour ta mise en page.
Les <table> ne devant être utilisés que pour l'affichage de ... tableaux (de données)

A+