modifier l'attribut name d'un input

**Rogg26** · 15/06/2007, 00h45

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.

**Shinuza** · 15/06/2007, 04h18

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

console.log(malignequimerenvoieunelement)

**deY!** · 15/06/2007, 07h31

Tu connais le nombre exacte d'input ?

tu peux faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**SpaceFrog** · 15/06/2007, 09h54

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

**Auteur** · 15/06/2007, 10h04

bonjour,

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

Après quelques modifications :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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+" ";
       }
    }

**Rogg26** · 15/06/2007, 12h11

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**SpaceFrog** · 15/06/2007, 12h54

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 ...

**Rogg26** · 15/06/2007, 14h10

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

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.

**SpaceFrog** · 15/06/2007, 14h13

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 ...

**Rogg26** · 15/06/2007, 14h22

Le nodeName me retourne INPUT pour les 2 navigateurs.

**deY!** · 15/06/2007, 14h35

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

**Rogg26** · 15/06/2007, 15h02

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.

**SpaceFrog** · 15/06/2007, 15h27

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

et pour rejoindre Auteur ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Rogg26** · 15/06/2007, 19h32

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

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é.

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

modifier l'attribut name d'un input

JavaScript

Discussions similaires

Partager

Partager