modifier l'attribut name d'un input

Version imprimable

15/06/2007, 00h45
Rogg26

modifier l'attribut name d'un input

Bonjour,
Voila j'aimerais modifier l'attribut name d'un input.
J'utilise la commande
document.getElementById('tarifs').rows[i].cells[j].childNodes[0].name = nveau_nom;

Ca marche pour l'id mais pas pour le name.

Enfait j'ai un tableau dans lequel on peut ajouter et supprimer des lignes, ces lignes contenant des input. A la suppression d'une ligne j'aimerais renommer tous les input nom1, nom2... avec des chiffres qui se suivent pour pouvoir les parcourir plus facilement au moment de l'enregistrement dans la base de données.

Si quelqu'un a une solution.
15/06/2007, 04h18
Shinuza

A mon avis le childNodes que tu tapes n'est pas le bon.
Utilse firefox et pas ta ligne en paramètre de la methode log de l'objet console

Code:

console.log(malignequimerenvoieunelement)

Tu connais le nombre exacte d'input ?

tu peux faire
Code:

1 2 3 4 5 6 var myform = document.forms['myform']; var myinput; for (n=0;n<nbinput;n++) { myinput = myform.elements['myinput'+n]; myinput.setAttribute('name', 'myinput'+n-1); }
Pour IE tu dois pouvoir faire

Code:

myinput.name = 'myinput'+(n-1);

15/06/2007, 09h54
SpaceFrog

attention aux childNodes !!!
fais un simple alert du childNodes.length tu comprendras ton erreur ...

bonjour,

Tu peux t'inspirer du script que je donne dans cette discussion

Après quelques modifications :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<script type="text/javascript">
<!--
 
function ajoutLigne()
{
  //num = 0;
  var Cell;
  var nom = document.getElementById("nom").value;
  var prenom = document.getElementById("prenom").value;
  var tableau = document.getElementById('tableau');
  var ligne = tableau.insertRow(-1);
  var bouton;
 
  if (nom.length==0)
     nom = "&nbsp;";
  if (prenom.length==0)
     prenom = "&nbsp;";
 
 
  //on place dans la cellule 0, le numero de ligne
  Cell = ligne.insertCell(0);
  Cell.innerHTML = ligne.rowIndex;
 
  Cell = ligne.insertCell(1);
  Cell.innerHTML = nom;
  Cell = ligne.insertCell(2);
  Cell.innerHTML = prenom;
 
  //on cree dans la cellule 3 un bouton
  Cell = ligne.insertCell(3);
  bouton = document.createElement("input");
  bouton.type = "button";
  bouton.value = "Supprimer";
  bouton.onclick = function(){suppression(this,ligne)};
  bouton.name = "name"+ligne.rowIndex;
  Cell.appendChild(bouton);
 
  //on affiche dans la cellule 4 le nom du bouton
  Cell = ligne.insertCell(4);
  Cell.innerHTML = bouton.name;
 
  document.getElementById("nom").value = "";
  document.getElementById("prenom").value = "";
 
}
 
function suppression(bouton,ligne)
{
  alert("Nom du bouton cliqué= "+bouton.name);
 
  document.getElementById('tableau').deleteRow(ligne.rowIndex);
 
  //Recomptage des lignes...
  var tableau = document.getElementById('tableau');
  var trs = tableau.rows;
  var n = trs.length;
  var i, j,  nI, listeInput;
 
  for (i=1; i<n; i++) //on commence à 1 et non à 0 ;)
  {
    trs[i].cells[0].innerHTML = trs[i].rowIndex;
 
    //suppression du contenu de la cellule 4 (qui affiche le nom du bouton)
    trs[i].cells[4].innerHTML = "&nbsp;";
 
    //on liste les input de la cellule 3 (logiquement il y a uniquement le bouton défini dans ajoutLigne()
    listeInput = trs[i].cells[3].getElementsByTagName("input");
    nI = listeInput.length;
 
    for (j=0; j<nI; j++)
    {
       if (listeInput[j].type.toLowerCase()=="button") //si on a un bouton
       {
         listeInput[j].name = "name"+trs[i].rowIndex;
         trs[i].cells[4].innerHTML +=listeInput[j].name+" ";
       }
    }
  }
 
}
 
 
//-->
</script>
 
</head>
<body>
 
  <form id="formulaire" action="">
  <div>
  <label>Nom</label> <input type="text" id="nom" /><br />
  <label>Prenom</label><input type="text" id="prenom" /><br />
  </div>
 
      <table id="tableau" border="1">
        <tr>
        <td>Numéro de ligne</td>
        <td>Nom</td>
        <td>Prenom</td>
        <td>Supprimer la ligne</td>
        <td>Nom du bouton</td>
        </tr>
      </table>
  </form>
 
  <div>
  <input type="button" value="Ajouter une ligne" onclick="ajoutLigne()" />
  <br />
  </div>
 
</body>
 
 
</html>

pour modifier le nom, je recherche les boutons ligne par ligne en utilisant getElementsByTagName (fonction suppression()):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
    //on liste les input de la cellule 3 (logiquement il y a uniquement le bouton défini dans ajoutLigne()
    listeInput = trs[i].cells[3].getElementsByTagName("input");
    nI = listeInput.length;
 
    for (j=0; j<nI; j++)
    {
       if (listeInput[j].type.toLowerCase()=="button") //si on a un bouton
       {
         listeInput[j].name = "name"+trs[i].rowIndex;
         trs[i].cells[4].innerHTML +=listeInput[j].name+" ";
       }
    }

15/06/2007, 12h11
Rogg26

Citation:

Envoyé par Shinuza

A mon avis le childNodes que tu tapes n'est pas le bon.
Utilse firefox et pas ta ligne en paramètre de la methode log de l'objet console

Code:

console.log(malignequimerenvoieunelement)

J'ai pas compris, qu'est ce que la methode log de l'objet console?

Enfait quel est le probleme avec les childNodes? Parce que la meme commande avec l'id fonctionne.

Je viens de tester sous firefox, cela fonctionne et le name est bien modifié.
IE ne comprendrait pas object.name?
Peut etre y a t-il une commande qui fonctionnerait sous IE.
15/06/2007, 12h54
SpaceFrog

non IE et FFX n'interprètent pas les nodes de la même façon...

fais un alert du nodeName tu verras bien
et accessoirement fais une recherche avec nodecleaner dans la FAQ ou les contributions ...
15/06/2007, 14h10
Rogg26

Je pense pas que mon probleme puisse-t-être résolu en utilisant un nodecleaner.
L'objet dont j'essaie de modifier le name est le bon.
Quand je fais un alert

Citation:

alert(document.getElementById('tarifs').rows[i].cells[j].childNodes[0].name);

il m'affiche bel et bien le nom de l'objet que ce soir sur IE ou FFX.

Mais impossible de le modifier sous IE.
15/06/2007, 14h13
SpaceFrog

et le nodeName te retourne quoi ???
je pense au contraire que le node cleaner ou le teste sur le tagName du Node peut être salutaire ...
15/06/2007, 14h22
Rogg26

Le nodeName me retourne INPUT pour les 2 navigateurs.
15/06/2007, 14h35
deY!

nodeName retourne le nom de la balise, pas la valeur de l'attribut name
15/06/2007, 15h02
Rogg26

Citation:

nodeName retourne le nom de la balise, pas la valeur de l'attribut name

Oui oui, c'est pour ça que j'utilise .name.
nodeName c'était juste pour verifier que j'étais bien sur le input.

Mon probleme est simplement que sous IE, je n'arrive pas à modifier l'attribut name.

il n'y a a priori aucune raison que le nale ne soit pas accessible ...

et pour rejoindre Auteur ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<script type='text/javascript'>
function changNames(){
 
	var conteneur=document.getElementById('master');
	for(i=0;i<conteneur.childNodes.length;i++){
 
			if(conteneur.childNodes[i].nodeName=="INPUT"){conteneur.childNodes[i].name="zz";}
			}
		}
 
function getNames(){
	var TabNames=new Array()
	var conteneur=document.getElementById('master')
 
	for(i=0;i<conteneur.childNodes.length;i++){
		if(conteneur.childNodes[i].nodeName=="INPUT"){TabNames.push(conteneur.childNodes[i].name)}
		}
alert(TabNames)
}
</script>
 
</head>
 
<body>
<div id='master'>
<input type='button' name="one"  value='one'/>
<input type='button' name="two"  value='two'/>
<input type='button' name="three" value='three'/>
<input type='button' name="four" value='four'/>
</div>
 
<input type='button' onclick="changNames()" value="changer" />
<input type='button' onclick="getNames()" value="voir" />
</body>
 
</html>

voir ... changer ... voir CQFD

15/06/2007, 19h32
Rogg26

Enfait je testais les modifications en affichant mon tableau avec un innerHTML

Citation:

alert(document.getElementById('tarifs').innerHTML);

Et sur IE les modifications ne sont pas affichées?!?

En revanche en affichant simplement le name je constate qu'il a bien été modifié.

Citation:

alert(document.getElementById('tarifs').rows[i].cells[j].childNodes[0].name);

Donc il semblerait qu'il s'agisse d'un bug au niveau de l'affichage avec innerHTML sous IE.

Voila, je me suis pris la tête sur un faux probleme.
En tout cas merci pour votre aide ;)