Déplacer des champ input à la volée

17 sept. 2010, 15:19

Bonjour,

Je cherche à faire un formulaire dynamique qui à a base ne propose qu'une seule ligne de champ texte (input), visuellement cela donnerais ceci :

	<form method="post" action="#" id="form">
		<fieldset>
			<span id="ligne_1">
				<input type="text" name="ordre[]" id="ordre_1" size="27" value="1" />
				<input type="text" name="article[]" id="article_1" size="27" value="" />
				<input type="text" name="quantitee[]" id="quantitee_1" size="3" value="" />
				<input type="text" name="prix[]" id="prix_1" size="5" value="" />
				<input type="button" value="x" id="boutton_1" onclick="delete_champ(1)" />
				<input type="button" value="+" id="boutton_haut" onclick="moveup_champ()" />
				<input type="button" value="-" id="boutton_bas" onclick="movedown_champ(1)" />
				<br />
			</span>
			<span id="champs_2"><a href="javascript:create_champ(2)">Ajouter un article</a></span>
		</fieldset>
	</form>

L'utilisateur doit pouvoir ajouter ou supprimer une ligne de champ par les boutons ajouter un champ (Ajouter un article) et X pour supprimer.

L'utilisateur doit aussi pouvoir modifier l'ordre de cette liste à la volée par les boutons "+" et "-".

Pour la partie ajout de ligne et suppression cela fonctionne avec l'adaptation d'un bout de code :

Code : Tout sélectionner

	<script type="text/javascript">
		<!--
			function create_champ(i){
				var i2 = i + 1;
				document.getElementById('champs_'+i).innerHTML = '<span id="ligne_'+i+'"><input type="text" size="27" name="ordre[]" id="ordre_'+i+'" value="'+i+'" \/>&nbsp;<input type="text" size="27" name="article[]" id="article_'+i+'" \/>&nbsp;<input type="text" size="3" name="quantitee[]" id="quantitee_'+i+'" \/>&nbsp;<input type="text" size="5" name="prix[]" id="prix_'+i+'" \/>&nbsp;<input type="button" value="x" id="boutton_'+i+'"onclick="delete_champ('+i+')" \/><br \/><\/span>';
				document.getElementById('champs_'+i).innerHTML += '<span id="champs_'+i2+'"><img src="images/add.png" alt="" title="" \/>&nbsp;<a href="javascript:create_champ('+i2+')">Ajouter un article<\/a><\/span>';
			}
			function delete_champ(i){
				document.getElementById("ligne_"+i).innerHTML="";
			}
		// -->
	</script>

Il manque le rajout des bouton "+" et "-" dans ce dernier.

Le but étant à la validation finale du formulaire (une fois que l'utilisateur à ajouter tous ces articles et qu'il les a mis dans l'ordre voulu) d'enregistrer chacune des lignes dans une table afin de pouvoir afficher les articles dans l'ordre souhaité par l'utilisateur.

Je n'ai pas trouvé d'exemple combinant ces fonctions.
Pourriez-vous m'aider à réaliser ces fonctions ?

D'avance merci.

17 sept. 2010, 16:46

Sur le principe je mettrais les input dans un tableau javascript. Ensuite suffirait de modifier l'ordre des éléments du tableau quand on clique sur + ou -

17 sept. 2010, 18:27

Bonsoir,

Merci d'avoir répondu.
Je cherche pour la mise en tableau, l'insertion fonctionne mais comment réattribuer l'ordre au autres champ déjà présent ?

et comment les supprimer suite à la suppression d'une ligne ?

Merci.

19 sept. 2010, 20:29

Pour insérer, supprimer, ou modifier l'ordre des éléments d'un tableau on peut faire par exemple :

Code : Tout sélectionner

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script type="text/javascript">
<!--
function Insert_ligne(index_insert, value, tab)
{
	if (typeof tab == 'object' && tab instanceof Array)
		{
			var nb_tab = tab.length;//nb d'éléments du tableau = dernier indice du tableau+1
			
			var index_insert = index_insert >= 0 && index_insert <= nb_tab ? index_insert : nb_tab;
			
			var temp = (typeof value == 'object' && value instanceof Array)? Array(value) : value;
			
			tab.splice(index_insert,0,temp);
		}
		
	return tab;
}



function Efface_ligne(index, tab)
{
	if (typeof tab == 'object' && tab instanceof Array && index >= 0 && index < tab.length)
		{
			tab.splice(index,1);
		}
		
	return tab;
}



function Modif_ordre(index, mod_index, tab)
{
	if (typeof tab == 'object' && tab instanceof Array && index >= 0 && index < tab.length)
		{
			var temp = (typeof tab[index] == 'object' && tab[index] instanceof Array) ? Array(tab[index]) : tab[index];
			tab.splice(index,1);
			
			tab.splice(mod_index,0,temp);
		}
		
	return tab;
} 




// TEST 
var tab = Array(0,1,2,3,4,5,6,7);

alert('Prend l\'index 6 du tableau ('+tab+') soit le septième élément contenant la valeur 6 et le place en 3 position soit l\'index 2 du tableau');

tab = Modif_ordre(6,2,tab);

for (i=0; i < tab.length; i++)
	{
		alert('index = '+i+' contenu = '+tab[i]);
	}



alert('efface maintenant la troisième ligne, soit l\'index 2 du tableau');
tab = Efface_ligne(2,tab);

for (i=0; i < tab.length; i++)
	{
		alert('index = '+i+' contenu = '+tab[i]);
	}



alert('Insert maintenant la valeur 6 à l\'index 6 soit en septième position du tableau');

tab = Insert_ligne (6,6 ,tab);
for (i=0; i < tab.length; i++)
	{
		alert('index = '+i+' contenu = '+tab[i]);
	}

-->
</script>


</head>

<body>
</body>
</html>

11 janv. 2011, 11:31

Bonjour,

Je reviens ici parce-que je galère un max avec mon formulaire. Je pense avoir compris ce qui doit se dérouler mais je n'arrive pas à le mettre en œuvre. Donc je suis reparti de mon code de base qui donne ceci :

Code : Tout sélectionner

				   <script type="text/javascript">
						//<![CDATA[
							count_field = '';
						//]]>
				   </script>

Le formulaire :

        <form method="post" action="#" id="form">
                <fieldset>
                        <span id="ligne_1">
                                <input type="text" name="ordre[]" id="ordre_1" size="27" value="1" />
                                <input type="text" name="article[]" id="article_1" size="27" value="" />
                                <input type="text" name="quantitee[]" id="quantitee_1" size="3" value="" />
                                <input type="text" name="prix[]" id="prix_1" size="5" value="" />
                                <input type="button" value="+" id="boutton_haut" onclick="move_field('up',1)" />
                                <input type="button" value="-" id="boutton_bas" onclick="move_field('down',1)" />
                                <input type="button" value="x" id="boutton_1" onclick="delete_field(1)" />
                                <br />
                        </span>
                        <span id="champs_2"><a href="javascript&#058;create_champ(2)">Ajouter une ligne</a></span>
                </fieldset>
        </form>

Les fonctions JavaScript :

Code : Tout sélectionner

					<script type="text/javascript">
						//<![CDATA[
							document.getElementById('article_1').focus();
							
							function tab_field(){
								var i;
								var tabInput = document.getElementsByTagName('input');
								var n = tabInput.length;
								y=1;
								z=0;
								for(i=0;i<n;i++){
									if (tabInput[i].type.toLowerCase() == 'text' && tabInput[i].name.toLowerCase() == 'ordre[]'){
										tabInput[i].value = y;
										tabInput[i].id = 'ordre_'+y;
										y++;
										z++;
									}
								}
								count_field = z;
							}
                               
							function create_field(i){
								var i2 = i + 1;
								document.getElementById('fields_'+i).innerHTML = '<span id="ligne_'+i+'"><input type="text" name="ordre[]" id="ordre_'+i+'" size="1" value="'+i+'" /><input type="text" size="55" name="article[]" id="article_'+i+'" \/>&nbsp;<input type="text" size="3" name="quantitee[]" id="quantitee_'+i+'" \/>&nbsp;<input type="text" size="5" name="prix[]" id="prix_'+i+'" \/>&nbsp; <input type="button" value="+" id="boutton_haut" onclick="move_field(\'up\','+i+')" />&nbsp;<input type="button" value="-" id="boutton_bas" onclick="move_field(\'down\','+i+')" />&nbsp;<input type="button" value="x" id="boutton_'+i+'" onclick="delete_field('+i+')" /><br \/><\/span>';
								document.getElementById('fields_'+i).innerHTML += '<span id="fields_'+i2+'"><img src="<?php echo PATH_IMAGE; ?>add.png" alt="" title="" \/>&nbsp;<a href="javascript:create_field('+i2+');">Ajouter une ligne<\/a><\/span>';
								document.getElementById('article_'+i).focus();
								tab_field();
							}

							function delete_field(i){
								line.splice(i);
								if(count_field > 1){
									document.getElementById("ligne_"+i).innerHTML = '';
								        // donne le focus sur le champ du dessous si il exist
								}else{
									document.getElementById('article_'+i).value = '';
									document.getElementById('quantitee_'+i).value = '';
									document.getElementById('prix_'+i).value = '';
									document.getElementById('article_'+i).focus();
								}
								tab_field();
							}

							function move_field(type,i){
								var y = i+1;
								var x = i-1;
								if(count_field > 1){
								        // ici en fonction du type remplacement des valeurs de champs
								        // focus sur le champ
								}else{
									document.getElementById('article_1').focus();
								}
								tab_field();
							}
						//]]>
					</script>

A chaque création de nouvelle ligne je ré attribut l'ordre dans le formulaire. Le problème et lors de la suppression ou du "up/down" je ne connais pas obligatoirement le id="ligne_" du précèdent et suivant et donc ne peut pas donner le focus au champ voulu mais aussi de changer les positions.

J'ai voulu faire un tableur mais à la lecture du contenu du tableau les enregistrement n’étaient pas correctement à jour.

Pourriez-vous m'orienter sur une solution simple ?

D'avance merci.

14 janv. 2011, 15:51

Et le code que je t'ai donné juste avant ne peux pas t'aider ?

14 janv. 2011, 17:00

Bonjour,

J'ai passé trop de temps sur mon code (en fait je tourne en rond). J'ai décidé de reprendre tout à zéro à partir de ce que vous m'avez donné. D'avance merci.

Je reviendrais mettre le résultat si il n'y à pas de problème.

Déplacer des champ input à la volée

Qui est en ligne