18041 sujets

Questions générales et questions de débutants

Ligne de formulaire génére dynamiquement

Je dois réaliser un formulaire de commande en ligne pour une société de transport. Pour l'instant, j'ai ceci :

upload/15545-tnpsform.jpg

Ce qui est très lourd et peu pratique.

J'aimerais que le client puisse entrer le nombre total de coli à envoyer, et quand il appuye sur "Ajouter", qu'un javascript (ou autre) génère le nombre de ligne de formulaire correspondant.

La ligne complète à générer ressemble à ça :

<tr>
   <td><input type="text" name="cp" size="8" tabindex="3" /></td>
   <td><select name="pays" tabindex="4" >
          <option value="B">B</option>
          <option value="FR">Fr</option>
          <option value="A">All</option>
          <option value="PB">PB</option>
          <option value="Lux">Lux</option>
          </select></td>              
   <td><select name="type" tabindex="5" >
          <option value="E">Enl</option>
          <option value="L">Liv</option>
          </select></td>
              
   <td><textarea name="description" rows="1" tabindex="6"></textarea></td>
          
   <td><select name="cr" tabindex="7">
          <option value="non">Non</option>
          <option value="oui">Oui</option>
          </select></td>


Bien sur, le "name" de chaque champs doit être incrémenter via une boucle pour être récupérer individuellement dans un script qui envoit par mail le résumé de la commande...(là se posera un autre problème dans mon script d'envois de mail, comment récupérer les name incrémentés...).


J'espère que c'est assez clair comme explication... ce n'est pas très facile à expliquer.

J'ai trouvé un javascript qui génère un champs input, mais je n'arrive pas à le "customiser" pour qu'il m'affiche une ligne complète de tableau.

Merci de toute aide apportée !
Modifié par Fabb (25 Jan 2008 - 16:49)
Salut !

J'avais fait quelque chose dans ce genre une fois.
Le fonctionnement était un peu différent. Le client cliquais sur un bouton + ou - pour ajouter ou enlever une ligne au formulaire.

En gros voici le fonctionnement :
J'ai dans mon html une div en display:none qui est en fait le modèle de la ligne de formulaire à dupliquer à chaque fois.
Toujours dans le html j'ai une "zone" dans laquelle je vais dupliquer mes lignes.
Ensuite avec javascript j'ajoute ou enlève des lignes en incremenyant mes noms de champs.

Voici le code épuré au maximum pour ne garder que ce qui t'interesse :

// javascript pour afficher ma première ligne de formulaire au chargement
function init() {
	document.getElementById('moreFields').onclick = moreFields;
	moreFields();
	setSeance();
}

// javacsript qui ajoute une ligne
var counter = 0;
function moreFields() {
	counter++;
	
	var newFields = document.getElementById('readroot').cloneNode(true);
	newFields.id = '';
	newFields.style.display = 'block';
	var newField = newFields.childNodes;
	for (var i=0;i<newField.length;i++) {
		var theName = newField[i].name;
		if (theName){
			newField[i].name = theName + counter;
		}
	}
	var insertHere = document.getElementById('writeroot');
	insertHere.parentNode.insertBefore(newFields,insertHere);
}

// dans le body j'affiche donc ma première ligne de formulaire
// je le fais en javascript pour pouvoir la supprimer plus facilement
<body onload="init();">

// ici c'est ma div "modèle"  que je duplique
<div id="readroot" style="display: none">
<span class="labeltext">Catégorie</span>&nbsp;
<input name="cat" type="text" class="inputext" />&nbsp;&nbsp;
<span class="labeltext">Tarif</span>&nbsp;
<input name="tarif" type="text" class="inputext" />&nbsp;&nbsp;
<input type="button" class="button" value="-" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />
</div>

// ici c'est la zone dans laquelle je duplique mes lignes de formulaires		
<span id="writeroot"></span>
<input type="button" class="button" id="moreFields" value="+" />


Normalement les élèments de code ci-dessus doivent être utilisés dans cet ordre dans ton html.
J'espère avoir été clair n'hésites pas si tu as des questions.[/i][/i]
Sujet clos
Aller à