Creer et supprimer des champs dynamiquement
Salut à tous,
je tourne en rond depuis quelques jours, je vous expose mon problème : j'essaie d'ajouter et supprimer des input 'text' de ma page web. Donc un champ par défaut, un bouton supprimer et un bouton ajouter.
Donc la j'en suis à "l'ajout de champs marche", et "la suppression marche, mais une seule fois". C'est ça le problème :(
Voici le html et les fonctions que j'utilise : (les borders servent uniquement à bien voir si c'est le bon champ qui est supprimé)
Code:
1
2
3
| <script type = "text/javascript">
var nbrechamps = 1;
</script> |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| echo "<tr><td align = 'left' valign = 'top'>Noms donnés à ce taxon : <span class = 'etoile'>*</span> : ";
echo "<br /><span class = 'small'>(Un nom minimum)</span></td>";
echo "<td align = 'left' valign = 'top'>";
echo "<table cellspacing = '0' cellpadding = '0'><tr><td align = 'left' valign = 'top'>";
echo "<div id = 'divChamps'>";
echo "<input type = 'text' name = 'AjoutTaxon_type1' maxlength = '255' size = '50' />";
echo "</div>";
echo "</td><td align = 'left' valign = 'bottom' style = 'padding-bottom:3px;'>";
?>
<a id="boutonSuppr" href="#" onclick="supprime_champ('divChamps',nbrechamps,'AjoutTaxon_type',50,255,'taxon_ajout','boutonSuppr'); nbrechamps = nbrechamps - 1;"><img src="Images/IcoSuppr.gif" alt="Supprimer un champ de nommage" title="Supprimer un champ de nommage" /></a>
<?php
echo "</td></tr></table>";
?><br /><a href = "#" onClick = "nbrechamps = nbrechamps + 1; cree_champ('divChamps',nbrechamps,'AjoutTaxon_type',50,255,'taxon_ajout','boutonSuppr');"><img src = "Images/Plus.gif" alt = "Ajouter un champ de nommage" title = "Ajouter un champ de nommage" /> Ajouter un champ</a>
<?php
echo "</td></tr>"; |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
function supprime_champ(idDiv,idChamp,champNom,champSize,champMaxlength,nomForm,idSupprButton) {
var search = '<br><br><input style="border: '+idChamp+'px solid black;" name="'+champNom+idChamp+'" size="'+champSize+'" maxlength="'+champMaxlength+'" type="text">';
var code = document.getElementById(idDiv).innerHTML;
alert(search+"\n\n\n"+code);
// On regarde si le code HTML du champ existe dans le div contenant les champs - si c'est le cas, on efface le code correspondant
var pos = 0; pos = code.indexOf(search);
if( pos != -1 ){
document.getElementById(idDiv).innerHTML = str_replace(search,'',code);
}
document.getElementById(idSupprButton).onclick = "nbrechamps=supprime_champ('"+idDiv+"',"+idChamp+",'"+champNom+"',"+champSize+","+champMaxlength+",'"+nomForm+"','"+idSupprButton+"')";
alert("Apres suppression, l'onclick du bouton est : \n\n"+document.getElementById(idSupprButton).onclick);
} |
Code:
1
2
3
4
5
6
7
8
9
|
function cree_champ(idDiv,newID,champNom,champSize,champMaxlength,nomForm,idSupprButton) {
// Ajout dans le code de la div du code du champ à ajouter
document.getElementById(idDiv).innerHTML += '<br /><br /><input style="border:'+newID+'px solid black;" name="'+champNom+newID+'" size="'+champSize+'" maxlength="'+champMaxlength+'" type="text"/>';
// Mise a jour du lien présent sur le bouton de suppression
document.getElementById(idSupprButton).onclick = "supprime_champ('"+idDiv+"',"+newID+",'"+champNom+"',"+champSize+","+champMaxlength+","+nomForm+","+idSupprButton+");";
} |
Voilou si vous avez une idée sur le problème, je suis toute ouïe !
