Ajout/suppression d'un champs de formulaire [Résolu]

maelob 944 Messages postés mardi 14 novembre 2006Date d'inscription 7 août 2009 Dernière intervention - 10 oct. 2007 à 10:26 - Dernière réponse : maelob 944 Messages postés mardi 14 novembre 2006Date d'inscription 7 août 2009 Dernière intervention
- 18 oct. 2007 à 09:15
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 += "

\n";
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

 <tr><th>Enseignants responsables</th>
    <td>

 

</td></tr>



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


 <tr><th>Enseignants responsables</th>
    <td>


        







</td></tr>



Mes
se placent bizarement. Quelqu'un a une idée de mon erreur?

D'avance merci.
Afficher la suite 

Votre réponse

16 réponses

Meilleure réponse
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 17 oct. 2007 à 20:01
3
Merci
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)

Merci PetoleTeam 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 95 internautes ce mois-ci

Commenter la réponse de PetoleTeam
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 10 oct. 2007 à 18:26
0
Merci
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)
Commenter la réponse de PetoleTeam
maelob 944 Messages postés mardi 14 novembre 2006Date d'inscription 7 août 2009 Dernière intervention - 10 oct. 2007 à 18:36
0
Merci
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.
Commenter la réponse de maelob
maelob 944 Messages postés mardi 14 novembre 2006Date d'inscription 7 août 2009 Dernière intervention - 12 oct. 2007 à 11:02
0
Merci
hum personne ne peut m'aider?
Commenter la réponse de maelob
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 13 oct. 2007 à 09:04
0
Merci
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)
Commenter la réponse de PetoleTeam
maelob 944 Messages postés mardi 14 novembre 2006Date d'inscription 7 août 2009 Dernière intervention - 15 oct. 2007 à 09:11
0
Merci
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.
Commenter la réponse de maelob
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 15 oct. 2007 à 19:48
0
Merci
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)
Commenter la réponse de PetoleTeam
maelob 944 Messages postés mardi 14 novembre 2006Date d'inscription 7 août 2009 Dernière intervention - 16 oct. 2007 à 09:11
0
Merci
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...
Commenter la réponse de maelob
maelob 944 Messages postés mardi 14 novembre 2006Date d'inscription 7 août 2009 Dernière intervention - 16 oct. 2007 à 17:09
0
Merci
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 += "

\n";

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?
Commenter la réponse de maelob
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 16 oct. 2007 à 19:28
0
Merci
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 !

<html>
<head>
<title></title>
<script language="javascript">
var Compteur = 0;
//--------------------------
function Delete_Ligne( obj_){
  var Parent;
  var Obj = obj_;
  if( Obj){
    //-- tant que pas la balise <TR>
    do{
       Obj = Obj.parentNode;
    }while( Obj.tagName != "TR")
    //-- Recup du parent
    Parent = Obj.parentNode;
    //-- Suppression de la ligne
    if( Parent){
      Parent.deleteRow( Obj.rowIndex)
    }
  }
}
//----------------------
function Create_Ligne(i){
  //-- compteur pour le FUN
  Compteur++;
  //-- Get objet tableau
  var O_Table = document.getElementById('T_INSERT');
  //-- Get nombre de ligne du tableau
  var NbrLigne = O_Table.rows.length;
  //-- Position d'insertion
  var Pos = NbrLigne;
  //-- Insertion d'une ligne
  O_Row  = O_Table.insertRow( Pos);
  //-- Insertion d'une cellule
  O_Cell = O_Row.insertCell(-1);
  O_Cell.innerHTML = '';
  //-- Insertion d'une autre cellule
  O_Cell = O_Row.insertCell(-1);
  O_Cell.innerHTML = '';
}
</script>
</head>

  ----

  Enseignants responsables |
  |
 

</html>

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)
Commenter la réponse de PetoleTeam
maelob 944 Messages postés mardi 14 novembre 2006Date d'inscription 7 août 2009 Dernière intervention - 16 oct. 2007 à 20:25
0
Merci
Merci pour ce bout de code, je regarderai ça demain au boulot pour y implementer et questionner si jamais.
Commenter la réponse de maelob
maelob 944 Messages postés mardi 14 novembre 2006Date d'inscription 7 août 2009 Dernière intervention - 17 oct. 2007 à 10:48
0
Merci
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 += "

\n";
//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.
Commenter la réponse de maelob
maelob 944 Messages postés mardi 14 novembre 2006Date d'inscription 7 août 2009 Dernière intervention - 17 oct. 2007 à 11:15
0
Merci
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.
Commenter la réponse de maelob
maelob 944 Messages postés mardi 14 novembre 2006Date d'inscription 7 août 2009 Dernière intervention - 17 oct. 2007 à 12:23
0
Merci
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);

}
Commenter la réponse de maelob
maelob 944 Messages postés mardi 14 novembre 2006Date d'inscription 7 août 2009 Dernière intervention - 17 oct. 2007 à 23:26
0
Merci
Si je le supprime physiquement mon while pour récuperer les valeurs des input fonctionne plus...
Commenter la réponse de maelob
maelob 944 Messages postés mardi 14 novembre 2006Date d'inscription 7 août 2009 Dernière intervention - 18 oct. 2007 à 09:15
0
Merci
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
Commenter la réponse de maelob

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.