Ajout et suppression de nouveaux champs

Version imprimable

Bonjour,

Après pas mal de temps passé à faire des recherches je suis arrivé à une solution qui se rapproche de ce que je souhaite mais des choses ne marchent pas encore...

Je m'explique, je souhaiterais afficher trois champs ( 2 select et un input ) lorsque que l'on clique sur un lien (Nommé Add Condition) et supprimer le dernier ajouté en cliquant sur Delete.

Mon problème est que la fonction supprimée ne fonctionne pas...

Actuellement j'ai ça :

script:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var i = 0;
 
function create_champ(i) {
	var i2 = i + 1;
	document.getElementById('field_'+i).innerHTML = '<select style="width: 50px;" name="where1_'+i+'"><option value="">IPADDRESS</option><option value="">HOSTNAME</option><option value="">FULLYQUALDOMAINNAME</option><option value="">SYSTEMNAME</option><option value="">NODETYPE</option></select><select style="width: 50px;" name="where2_'+i+'"><option selected="" value="">=</option><option value="">/=</option></select><INPUT type="where3" value="" name="where3_'+i+'" style="width: 50px;">';
	document.getElementById('field_'+i).innerHTML += (i <= 10) ? '<br /><span id="field_'+i2+'"><a href="javascript:create_champ('+i2+')">Add Condition</a><a href="javascript:delete_champ('+i+')"> - Delete</a></span>' : '';
}
 
function delete_champ(i) {
	var i2 = i - 1;
	document.getElementById('field_'+i).removeChild(document.getElementById(1));
	document.getElementById('field_'+i).innerHTML += (i <= 10) ? '<br /><span id="field_'+i2+'"><a href="javascript:create_champ('+i2+')">Add Condition</a></span>' : '';
	document.getElementById('field_'+i).innerHTML += (i >= 0) ? '<br /><span id="field_'+i2+'"><a href="javascript:delete_champ('+i2+')"> - Delete</a></span>' : '';
 
}

HTML:

Code:

1
2
3
4
      	<fieldset align="center">
      		<legend>Conditions :</legend>				
			<span id="field_1"><a href="javascript:create_champ(1)">Add Condition</a><a href="javascript:delete_champ(1)"> - Delete</a></span>
		</fieldset>

Merci pour votre aide !
(J'espère avoir posté mon message au bon endroit...)

27/10/2011, 19h05
NoSmoking
Bonjour,
il faut que tu commence par reprendre ta façon d'ajouter tes élément pour construire un arbre DOM correct, tu insères un SPAN dans un SPAN dans lequel tu insères un SPAN dans lequel etc...

sinon en faisant
Code:

1 2 3 4 5 function delete_champ(i) { var obj = document.getElementById('field_'+i); // get le dernier fait obj.parentNode.removeChild( obj); // le supprime i--; // decremente pour la suite }
une chose encore la variable globale i est mal choisie.

voila une façon de faire.

Merci beaucoup pour ta réponse !

La solution que tu m'as donnée est tellement plus claire ! Au moins elle est beaucoup plus compréhensible.

Par contre les boutons d'ajout et de suppression disparaissent lorsque je supprime un élément, j'ai mis ça en plus dans delete_champs :
Code:

1 2 3 4 5 6 7 8 function delete_champ(i) { alert("avant : "+i); var obj = document.getElementById('field_'+i); obj.parentNode.removeChild( obj); i--; document.getElementById('field_'+i).innerHTML += (i <= 10) ? '<br /><span id="field_'+i+'"><a href="javascript:create_champ('+i+')">Add Condition</a><a href="javascript:delete_champ('+i+')"> - Delete</a></span>' : ''; javascript:create_champ(i); }
... mais le problème c'est que lorsque tous les éléments sont supprimés il ne me propose plus d'ajouter une condition.

Je suis clair ?

Merci

EDIT: En d'autres mots, lorsque mon i atteint la valeur de 0 je voudrais que ça retourne à l'état d'origine (juste Add Condition)

...reprenons sur des bases plus saines à savoir supprimer ces peu élégants innerHTML.

L'idée est de créer une DIV, cachée, contenant les différents éléments a ajouter et que l'on va cloner avant ajout dans une DIV de destination qui elle est vide au départ.

Le name des différents champs seront sous la forme 'nom[]' afin d'être récupérés coté serveur sous forme de tableau.

La fonction d'ajout devient donc limpide

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function appendCondition(){
  // recup div de destination
  var oDest = document.getElementById('insert');
  // fait une copie
  var oSrce = document.getElementById('copie').cloneNode(true);
  // ajoute
  oDest.appendChild( oSrce);
  // affiche
  oSrce.style.display = 'block';
  // pas de doublon dans les ID
  oSrce.id = '';
  // annule action du click
  return false;
}

La fonction de suppression change un peu, on va récupérer toutes les divs ajoutées pour supprimer la dernière

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function removeCondition(){
  // recup div conteneur
  var oSrce = document.getElementById('insert');
  // recup les divs crees
  var tDiv  = oSrce.getElementsByTagName('DIV');
  // si il y en a
  if( tDiv.length){
    // destroy le dernier
    oSrce.removeChild( tDiv[tDiv.length-1]);
  }
  // annule action du click
  return false;
}

Le HTML devient le suivant

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="copie" style="display:none">
  <select style="width:50px;" name="select1[]">
    <option value="">IPADDRESS</option>
    <option value="">HOSTNAME</option>
    <option value="">FULLYQUALDOMAINNAME</option>
    <option value="">SYSTEMNAME</option>
    <option value="">NODETYPE</option>
  </select>
  <select style="width: 50px;" name="select2[]">
    <option selected="" value="">=</option>
    <option value="">/=</option>
  </select>
  <input type="input" value="" name="input[]" style="width:50px;">
</div>
 
  <fieldset align="center">
    <legend>Conditions :</legend>
    <div id="insert"></div>
    <span id="field_1">
      <a href="#" onclick="return appendCondition();">Add Condition</a>
      <a href="#" onclick="return removeCondition();"> - Delete</a>
    </span>
  </fieldset>

nota :
Les balises A pourrait avantageusement être remplacées par des balises BUTTON qui avec un peu de style ferait très bien l'affaire.

Woow ! Merci pour le temps que tu as passé sur mon problème !

Tout marche parfaitement, me manque plus qu'à comprendre comment fonctionne tout ça ;)

Merci infiniment !

EDIT: Je pense avoir compris, besoin d'une confirmation... pour récupérer par la suite les resultats dans les différents champs je vais devoir faire ça ?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function sendCondition(){ var oSrce = document.getElementById('insert'); var tDiv = oSrce.getElementsByTagName('DIV'); for (int i=0; i<tDiv.length; i++){ //On récupère les valeurs de select1[i], select2[i], select3[i] vers mon fichier java (Je sais pas encore comment :) ) } return false; }

30/11/2011, 17h56
Geoffrey49000

De retour...

Quelqu'un pourrais t'il me donner une piste pour récupérer les valeurs de mes tableaux select1[], select2[] et select3[] ?

Merci beaucoup ! :)
02/12/2011, 20h16
NoSmoking

il te suffit de parcourir les éléments SELECT et de récupérer leur value