Ajout/suppression d'un champs de formulaireRésolu

Question

Bonjour tout est dans le titre, un bouton ajout qui ajout un input text et un bouton. et ce dernier bouton ajouter permet d'enlever l'input crée ainsi que son bouton enlever associé. L'ajout fonctionne très quoi que je ne comprend pas pourquoi mes se place de cette manière enfin on ça après voici ma fonction. //http://www.editeurjavascript.com/scripts/scripts_formulaires_3_653.php function create_input(i, namein) { var i2 = i + 1; document.getElementById(namein+i).innerHTML = ""; document.getElementById(namein+i).innerHTML += ""; document.getElementById(namein+i).innerHTML += " "; document.getElementById(namein+i).innerHTML += " "; } function remove_input(namein, i) { var i2 = i + 1; document.getElementById(namein+i).style.display = 'none'; //document.getElementById(namein+i+'b').style.display = 'none'; //document.getElementById(namein+i2).style.visibility = 'visible'; } et un bout de mon code HTML Enseignants responsables Alors quand je fais enlever il m'enleve tout a partir du bouton enlevé sur lequel j'ai cliqué même mon bouton ajouté cela parait logique quand on voit le fichier interprété en html crée Enseignants responsables Mes se placent bizarement. Quelqu'un a une idée de mon erreur? D'avance merci.

PetoleTeam · Accepted Answer

Bonjour,
tu ne facilites pas la vie, tu peux faire simplement, pour la création de tes INPUTs, une écriture avec innerHTML

function create_input(i, namein, td) {
var i2 =   i + 1;
 //On cherche le noeud parent de l'objet cree 
var conteneur  = document.getElementById('td');
//On supprime le bouton d'ajout existant
 // IL TE FAUT LE SUPPRIMER PHYSIQUEMENT 
var Obj  =  document.getElementById( namein +i);
var Parent = Obj.parentNode;
Parent.removeChild( Obj);

 //on cree un nouveau div 
var new_div  = document.createElement("div");
new_div.id = namein +i;
new_div.innerHTML ='';
new_div.innerHTML += "";
new_div.innerHTML += "";
new_div.innerHTML += "
";
//On place notre div comme objet enfant de l'objet parent cherche precedement
conteneur.appendChild(new_div);
}

En effet il se trouve qu'avec ta façon de procéder tu te retrouves avec 2 objets ayant le même ID, tu le caches, d'après ta méthode dans ta fonction initiale, ton INPUT faisant en fait la même chose, 
IE prennant le premier recontré
.
Pas sur d'être clair, il te faut donc le supprimer PHYSIQUEMENT. 

Il te restera un problème si tu supprimes le dernier INPUT ajouter.
 
 

;0)

PetoleTeam · Answer

Bonjour,
tu crées ton INPUT type texte et ton INPUT type button dans le même DIV, la fonction remove_input ne fait que cacher le DIV, donc tout ce qu'il y a dedans.
Mais ai je bien tout compris ?



;0)

maelob · Answer

cacher le div ou supprimer le div moi je m'en fout. En faite en y reflechissant bien il vaut mieux les supprimer pour ne pas avoir des variable que je ne veut pas recuperer.
Merci de ton aide.

maelob · Answer

hum personne ne peut m'aider?

PetoleTeam · Answer

Bonjour,
Bon apparement réponse à coté, il semble que ce soit le comportement des DIVs qui soit ton réel problème !?!

avec
document.getElementById( id_).style.display = 'none';
l'espace alloué au DIV dans ton document est libéré, comme si on le supprimé réellemnt du document

avec
document.getElementById( id_).style.visibility = 'hidden';
l'espace est coservé mais le DIV et son contenu ne sont plus affichés

si tu as un lien pour que l'on se rende compte, on est bien loin du titre de ton post...


;0)

maelob · Answer

euh oui tu as raison c'est surtout avec mes div que j'ai un probleme déjà merci pour la precision entre display et visibility je ne connaissais pas la différence.

Après mes div en faite il me mette pas comme je veux c'est à dire que j'ai 
 contenu
 autre contenu 
... puis 
 
 


Alors forcement quand je lui dis de l'enlever ben... il enleve tout je compprend pas pourquoi ça se met sous cette forme...

Merci encore pour ton aide.

PetoleTeam · Answer

Bonjour,problème d'encapsulage de tes DIVs
ton fichier ...










 id="teacher1">












 id="teacher2">












 id="teacher3">












 id="teacher4">



il serait souhaitable d'écrire plutôt comme ceci










 id="teacher1">




























id="teacher2">




























id="teacher3">
















id="teacher4">















;0)

maelob · Answer

Oui je sais qu'on doit l'écrire comme ça mais c'est avec l'action javascript d'ajout de champs qu'ils se mettent comme ça... je ne comprend pas pourquoi d'ailleurs...

maelob · Answer

Bon le problème des div est réglé j'ai changé ma fonction d'ajout de cette manière 

function create_input(i, namein) {

var i2 = i + 1;

document.getElementById(namein+i).style.display = 'none';

var new_div = document.createElement("div");
new_div.id = namein+i;

var new_but2 = document.createElement("input");
new_but2.type = "button";
new_but2.value = "Ajouter";
new_but2.onclick = function(){create_input(i2, namein);};
new_but2.id = namein+i2;

var conteneur = document.getElementById("td");

conteneur.appendChild(new_div);

document.getElementById(namein+i).innerHTML = "";
document.getElementById(namein+i).innerHTML += "";
document.getElementById(namein+i).innerHTML += "

";

conteneur.appendChild(new_but2);
}

Les Div se placent comme il le faut ma fonction qui enleve le bouton et le champs fonctionne très bien aussi mais c que je veux c'est vraimetn supprimer cet input pour ne pas avoir a récupérer sa valeur.

Une idée?

PetoleTeam · Answer

Bonjour, je te propose une alternative qui fait, presque, suite à un post sur ce site 979664 http://www.javascriptfr.com/infomsg.aspx?ID=979664 je te livre le code pour analyse et question peut être ! ---- Enseignants responsables | | On est dans l'esprit de ce que tu as écrit. Voila analyse et tiens moi au courant que cela réponde ou non à ton problème ;0)

maelob · Answer

Merci pour ce bout de code, je regarderai ça demain au boulot pour y implementer et questionner si jamais.

maelob · Answer

Bon j'ai regardé ça marche bien mais en faite finalement je me suis débrouillé en mettant la value de mon input à '' fianelement c'est pas dérangeant. Juste pour revenir à ma fonction ajout elle ne fonctionne pas sous ie d'après toi de quoi ça pourrai venir?  d'après  http://www.quirksmode.org/dom/w3c_core.html createElement est supporté. et appendChild aussi... Je remet ma fonction ajour ça sera plus simple pour comparer 

function create_input(i, namein, td) {

var i2 = i + 1;
//On supprime le bouton d'ajout existant
document.getElementById(namein+i).style.display = 'none';//ceci fonctionne
//on crée un nouveau div
var new_div = document.createElement("div");
new_div.id = namein+i;
//On crée un nouveau bouton d'ajout
var new_but2 = document.createElement("input");
new_but2.type = "button";
new_but2.value = "Ajouter";
new_but2.onclick = function(){create_input(i2, namein, td);};
new_but2.id = namein+i2;
//On cherche le noeud parent de l'objet crée
var conteneur = document.getElementById(td);
//On place notre div comme objet enfant de l'objet parent cherché précédement
conteneur.appendChild(new_div);
//on écrit dans le div
document.getElementById(namein+i).innerHTML = "";
document.getElementById(namein+i).innerHTML += "";
document.getElementById(namein+i).innerHTML += "

";
//on place le nouveau bouton d'ajout comment objet enfant.
conteneur.appendChild(new_but2);
}

J'ai testé sous IE6 et konqueror ça a le même effet ça ajoute pas ça supprime ce qu'on lui dit de supprimer masi après plus rien... Sous ie ça fonctionne très bien.
Ce qui est bien avec cette fonction c'est qu'elle place les DIV comme il faut donc j'aimerai ne pas trop avoir à la changer.

maelob · Answer

D'après le console de déboguage de konqueror (qui a dit que konqueror était nul) mon problème vient de l'innerHTML je vais essayer avec des createElement et si je trouve pas je reviendrai. Si je revient pas je te remercie beaucoup de ton aide.

maelob · Answer

en faite ça change rien...

function create_input(i, namein, td) {

var i2 = i + 1;
//On supprime le bouton d'ajout existant
document.getElementById(namein+i).style.display = 'none';
//on crée un nouveau div
var new_div = document.createElement("div");
new_div.id = namein+i;
//On crée un nouveau bouton d'ajout
var new_but2 = document.createElement("input");
new_but2.type = "button";
new_but2.value = "Ajouter";
new_but2.onclick = function(){create_input(i2, namein, td);};
new_but2.id = namein+i2;
//on crée le nouvel input text
var new_input = document.createElement("input");
new_input.type = "text";
new_input.id = namein+i+"a";
new_input.name = namein+i;
new_input.size = "32";
new_input.maxlenght ="80";
//oncrée le nouveau bouton enlever
var new_but1 = document.createElement("input");
new_but1.type = "button";
new_but1.value = "Enlever";
new_but1.onclick = function(){remove_input(i, namein);};
//On cherche le noeud parent de l'objet crée
var conteneur = document.getElementById(td);
//On place notre div comme objet enfant de l'objet parent cherché précédement
conteneur.appendChild(new_div);
var ndiv = document.getElementById(namein+i);
//on écrit dans le div
ndiv.appendChild(new_input);
ndiv.appendChild(new_but1);
//on place le nouveau bouton d'ajout comment objet enfant.
conteneur.appendChild(new_but2);

}

maelob · Answer

Si je le supprime physiquement mon while pour récuperer les valeurs des input fonctionne plus...

maelob · Answer

Oula je dis des conneries les soir après le boulot.

Oui apparement c'était ça du moinis ça fonctionne sous konqueror, j'ai pas ie sous la mains je testerai plus tard.

Merci beaucoup :D

Ajout/suppression d'un champs de formulaire

16 réponses

Votre réponse

Discussions similaires