Ajouter des champs dans un formulaire

29 mars 2007, 00:16

Bonsoir à tous,

je suis en train de créer un formulaire et un des champs devra être répété plusieurs fois selon les besoins de l'utilisateur.

J'aimerai pouvoir ajouter un nouveau groupe de champs en cliquant sur un [+] sans avoir à recharger la page.

mere-teresa m'a dit que c'était possible en javascript et que ça avait du être traité un certain nombre de fois ici, mais mes recherches sont restée vaine

Je précise que je suis totalement débutant en javascript et que je fais du gros php qui tache, donc il faut me parler lentement, mais j'insiste quand même

29 mars 2007, 11:52

Code : Tout sélectionner

<html>
<head>
<script>
 function addAuthor(idChamp) {
   try {
   
   
      var div = document.createElement('div');
      var input = document.createElement('input');
      input.setAttribute('type','text');
      input.setAttribute('name','auteur[]');
      input.setAttribute('value','');
      input.appendChild(document.createTextNode(''));
   
      div.appendChild(document.createTextNode('Auteur : '));
      div.appendChild(input);
   
      document.getElementById(idChamp).appendChild(div);
   }
   catch(e) {
       alert(e);
    }
} 
</script>
</head>
<body>
<a href="#" onClick="javascript:addAuthor('divaut');">Ajouter un auteur</a>
<form action="testForm.php" id="auteurs" method="post">
TEst<input type="text" name="test" /><br />
<div id="divaut"></div>
<input type="submit" value="Envoyer" />
</form>
</body>
</html>

29 mars 2007, 12:06

Marchi

Je vais tester ça de suite

29 mars 2007, 12:29

Bonjour,

J'ai testé ce code par curiosité. Il fonctionne avec FF mais sous IE6 > object Error

29 mars 2007, 13:42

Effectivement le try catch permet de tester la réussite de ce code.

Voici un code qui fonctionne sous IE selon moi. (testé sous MSIE 7)

Code : Tout sélectionner

function addDonnee(idChamp) {
   try {
      var conteneur = document.getElementById(idChamp);
      var undiv = document.createElement('div');
     var fich1 = document.createTextNode('Etiquette:');
      var fich2 = document.createTextNode(' ');
      var fich = document.createElement('input');
      fich.setAttribute('type','text');
      fich.setAttribute('name','donnee_name[]');
      fich.setAttribute('value','');
      fich.size="30";
      undiv.appendChild(fich1);
     undiv.appendChild(fich2);
      undiv.appendChild(fich);
      conteneur.appendChild(undiv);
   }
   catch(e) {
       alert(e);
    }
}

En bonus, des icônes web en libre service, avec un joli [+]
http://www.svay.com/web/icones/

29 mars 2007, 15:05

Bonjour,

Je n'étais pas l'auteur du post mais j'en profite!
Merci pour le code il fonctionne également sur IE6

29 mars 2007, 18:07

Bonjour,

Je n'étais pas l'auteur du post mais j'en profite!
Merci pour le code il fonctionne également sur IE6

Tu fais bien d'en profiter, au moins je me dis que j'ai pas créé un topic pour rien

Je suis en train d'adapter le code à mes besoins (et j'ai un peu de mal à comprendre comment tout marche), dès que j'ai quelque chose qui tourne je vous le dis, mais j'ai bon espoir.

29 mars 2007, 19:44

J'y suis presque, sauf qu'il veut pas me coller la nouvelle portion au niveau de la balise <div id="tartempion"></div>
Ca marche, mais ça fait un peu bordélique.

Voici à quoi ressemble mon code pour vous faire une idée:

<html>
<head>
<title>titre</title>
<script>
function addArticle(idChamp) {
	try {
		var conteneur = document.getElementById(idChamp);
		var undiv = document.createElement('div');
		var untr = document.createElement('tr');
		var untd = document.createElement('td');
		var desc = document.createTextNode('Description :');
		var inpdesc = document.createElement('input');
		var detail = document.createTextNode('Detail :');
		var inpdetail = document.createElement('input');
		var pu = document.createTextNode('Prix unitaire :');
		var inppu = document.createElement('input');
		var quantite = document.createTextNode('Quantit&eacute; :');
		var inpquantite = document.createElement('input');
		var remise = document.createTextNode('remise :');
		var inpremise = document.createElement('input');
		var euro = document.createTextNode('&euro;');
		var pourcent = document.createTextNode('%');
		
		inpdesc.setAttribute('type', 'text');
		inpdesc.setAttribute('name','desc[]');
		inpdesc.setAttribute('value','');
		inpdesc.setAttribute('maxlenght', '200');
		inpdesc.setAttribute('size', '51');
		inpdetail.setAttribute('type', 'textarea');
		inpdetail.setAttribute('name', 'detail[]');
		inpdetail.setAttribute('cols', '50');
		inpdetail.setAttribute('rows', '5');
		inppu.setAttribute('type', 'text');
		inppu.setAttribute('name', 'pu[]');
		inppu.setAttribute('value', '0');
		inppu.setAttribute('maxlenght', '5');
		inppu.setAttribute('size', '4');
		inpquantite.setAttribute('type', 'text');
		inpquantite.setAttribute('name', 'quantite[]');
		inpquantite.setAttribute('value', '0');
		inpquantite.setAttribute('maxlenght', '3');
		inpquantite.setAttribute('size', '2');
		inpremise.setAttribute('type', 'text');
		inpremise.setAttribute('name', 'remise_art[]');
		inpremise.setAttribute('value', '0');
		inpremise.setAttribute('maxlenght', '2');
		inpremise.setAttribute('size', '2');
		
		undiv.appendChild(untr);
		undiv.appendChild(untd);
		undiv.appendChild(desc);
		undiv.appendChild(untd);
		undiv.appendChild(inpdesc);
		undiv.appendChild(untr);
		undiv.appendChild(untd);
		undiv.appendChild(detail);
		undiv.appendChild(untd);
		undiv.appendChild(inpdetail);
		undiv.appendChild(untr);
		undiv.appendChild(untd);
		undiv.appendChild(pu);
		undiv.appendChild(untd);
		undiv.appendChild(inppu);
		undiv.appendChild(euro);
		undiv.appendChild(untr);
		undiv.appendChild(untd);
		undiv.appendChild(quantite);
		undiv.appendChild(untd);
		undiv.appendChild(inpquantite);
		undiv.appendChild(untr);
		undiv.appendChild(untd);
		undiv.appendChild(remise);
		undiv.appendChild(untd);
		undiv.appendChild(inpremise);
		undiv.appendChild(pourcent);
		conteneur.appendChild(undiv);
	}
	catch(e) {
	alert(e);
	} 
}
</script>


</head>
<body>

<div id="contenu">
        <form action="index.php" method="POST">
	<table border="1" cellspacing="6">
		<tr>
			<td>Client :</td>
			<td><select name="client">
			<option value="toto">toto</option>
			<option value="titi">titi</option>
			<option value="tata">tata</option>
			</select>
			</td>
		</tr>
		<tr>
			<td></td>
			<td align="right"><a href="#" onClick="javascript:addArticle('divarticle');"><img src="images/add.png" alt="add" />Ajouter un article</a></td>
		<tr>
			<td>Description :</td>
			<td><input type="text" name="desc[]" maxlenght="200" size="51" /></td>
		</tr>
			<td valign="top">Detail :</td>
			<td><textarea name="detail[]" cols="50" rows="5" /></textarea></td>
		</tr>
		<tr>
			<td>Prix unitaire :</td>
			<td><input type="text" name="pu[]" value="0" maxlenght="5" size="4" />&euro;</td>
		</tr>
		<tr>
			<td>Quantit&eacute; :</td>
			<td><input type="text" name="quantite[]" value="0" maxlenght="3" size="2" /></td>
		</tr>
		<tr>
			<td>Remise :</td>
			<td><input type="text" name="remise_art[]" value="0" maxlenght="2" size="2" />%</td>
		</tr>
		<div id="divarticle"></div>
	</table>
	<br />
	<input type="submit" value="<?php echo _OK ?>" />
	</form>
</body>
</html>

J'ai testé sous Mac et Windows, avec FF, Safari et IE7, j'ai toujours le même résultat

30 mars 2007, 00:09

Ca y est, ça marche.

En fait je m'étais pris les pieds dans les <div> et l'implémentation du javascript.

Merci pour votre aide

voici mon script pour ceux que ça intéresse :

Code : Tout sélectionner

<html>
<head>
<title>test</title>
<script>
function addArticle(idChamp) {
	try {
		var conteneur = document.getElementById(idChamp);
		var tr1 = document.createElement('tr');
		var tr2 = document.createElement('tr');
		var tr3 = document.createElement('tr');
		var tr4 = document.createElement('tr');
		var tr5 = document.createElement('tr');
		var td1 = document.createElement('td');
		var td2 = document.createElement('td');
		var td3 = document.createElement('td');
		var td4 = document.createElement('td');
		var td5 = document.createElement('td');
		var td6 = document.createElement('td');
		var td7 = document.createElement('td');
		var td8 = document.createElement('td');
		var td9 = document.createElement('td');
		var td10 = document.createElement('td');
		var desc = document.createTextNode('Description :');
		var inpdesc = document.createElement('input');
		var detail = document.createTextNode('Detail :');
		var inpdetail = document.createElement('textarea');
		var pu = document.createTextNode('Prix unitaire :');
		var inppu = document.createElement('input');
		var quantite = document.createTextNode('Quantit&eacute; :');
		var inpquantite = document.createElement('input');
		var remise = document.createTextNode('remise :');
		var inpremise = document.createElement('input');
		var euro = document.createTextNode('&euro;');
		var pourcent = document.createTextNode('%');
		
		td2.setAttribute('valign', 'top');
		inpdesc.setAttribute('type', 'text');
		inpdesc.setAttribute('name','desc[]');
		inpdesc.setAttribute('value','');
		inpdesc.setAttribute('maxlenght', '200');
		inpdesc.setAttribute('size', '51');
		inpdetail.setAttribute('name', 'detail[]');
		inpdetail.setAttribute('cols', '50');
		inpdetail.setAttribute('rows', '5');
		inppu.setAttribute('type', 'text');
		inppu.setAttribute('name', 'pu[]');
		inppu.setAttribute('value', '0');
		inppu.setAttribute('maxlenght', '5');
		inppu.setAttribute('size', '4');
		inpquantite.setAttribute('type', 'text');
		inpquantite.setAttribute('name', 'quantite[]');
		inpquantite.setAttribute('value', '0');
		inpquantite.setAttribute('maxlenght', '3');
		inpquantite.setAttribute('size', '2');
		inpremise.setAttribute('type', 'text');
		inpremise.setAttribute('name', 'remise_art[]');
		inpremise.setAttribute('value', '0');
		inpremise.setAttribute('maxlenght', '2');
		inpremise.setAttribute('size', '2');
		
		td1.appendChild(desc);
		td2.appendChild(inpdesc);
		tr1.appendChild(td1);
		tr1.appendChild(td2);
		td3.appendChild(detail);
		td4.appendChild(inpdetail);
		tr2.appendChild(td3);
		tr2.appendChild(td4);
		td5.appendChild(pu);
		td6.appendChild(inppu);
		td6.appendChild(euro);
		tr3.appendChild(td5);
		tr3.appendChild(td6);
		td7.appendChild(quantite);
		td8.appendChild(inpquantite);
		tr4.appendChild(td7);
		tr4.appendChild(td8);
		td9.appendChild(remise);
		td10.appendChild(inpremise);
		td10.appendChild(pourcent);
		tr5.appendChild(td9);
		tr5.appendChild(td10);
		conteneur.appendChild(tr1);
		conteneur.appendChild(tr2);
		conteneur.appendChild(tr3);
		conteneur.appendChild(tr4);
		conteneur.appendChild(tr5);
	}
	catch(e) {
	alert(e);
	} 
}
</script>


</head>
<body>

<div id="contenu">
	<table border="0" cellspacing="6" id="divarticle">
		<tr>
			<td>Client :</td>
			<td><select name="client">
			<option value="toto">toto</option>
			<option value="titi">titi</option>
			<option value="tata">tata</option>
			</select>
			</td>
		</tr>
		<tr>
			<td></td>
			<td align="right"><a href="#" onClick="javascript:addArticle('divarticle');"><img src="images/add.png" alt="add" />Ajouter un article</a></td>
		<tr>
			<td>Description :</td>
			<td><input type="text" name="desc[]" maxlenght="200" size="51"></td>
		</tr>
			<td valign="top">Detail :</td>
			<td><textarea name="detail[]" cols="50" rows="5"></textarea></td>
		</tr>
		<tr>
			<td>Prix unitaire :</td>
			<td><input type="text" name="pu[]" value="0" maxlenght="5" size="4" />&euro;</td>
		</tr>
		<tr>
			<td>Quantit&eacute; :</td>
			<td><input type="text" name="quantite[]" value="0" maxlenght="3" size="2" /></td>
		</tr>
		<tr>
			<td>Remise :</td>
			<td><input type="text" name="remise_art[]" value="0" maxlenght="2" size="2" />%</td>
		</tr>
	</table>
	<br />
	<input type="submit" value="<?php echo _OK ?>" />
	</form>
</body>
</html>

Ajouter des champs dans un formulaire

Qui est en ligne