Appliquer un même script sur différents éléments de même type

**GuiA7** · 29/01/2015, 11h16

Bonjour à tous,

voilà je suis en train de créer un formulaire de modification des informations d'un compte et j'aimerais que lorsque l'on clic sur le bouton modifier une div s'affiche pour permettre les modifications. Je passe donc d'un texte en solide pour un input de type texte. Le problème c'est qu'avec mon code tel quel, je ne peux modifier que mon premier paramètre et pas celui correspond à mon clic.
je suppose qu'il faudrait faire une boucle qui modifie au clic les id de la ligne en cours pour que mon script s'applique au bon élément... mais je suis un peu bloqué!

j'aurais bien fait un code spécifique pour chaque ligne li mais j'ai beaucoup de paramètres modifiables et mon script est déjà assez lourd vu qu'il récupère 4 variables...

je vous laisse mon code pour plus de précisions :

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
<ul class="listes-a-propos">
   <li>
	<a class="lien-maquettes" id="conteneur">
		<h3>Nom : Valjean</h3>
		<a  id="small1" href="javascript: switchInfoPerso1();"><input type="submit" value="Modifier"/></a>
	</a>
		<div class="details" id="maquettes" style="display: none;">
		      <h3>Nom : <input type="text" name="nom" /></h3>
		      <a id="small2" href="javascript: switchInfoPerso2();"><input type="submit" value="Enregistrer"/></a>
		</div>
  </li>
   <li>
		<a class="lien-maquettes" id="conteneur">
			<h3>Prénom : Jean</h3>
			<a id="small1" href="javascript: switchInfoPerso1();"><input type="submit" value="Modifier"/></a>
		</a>
		<div class="details" id="maquettes" style="display: none;">
			<h3>Prénom : <input type="text" name="prenom" /></h3>
			<a id="small2" href="javascript: switchInfoPerso2();"><input type="submit" value="Enregistrer"/></a>
		</div>
	</li>
</ul>

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
function switchInfoPerso1() {
	divInfo1 = document.getElementById('maquettes');
	divInfo2 =document.getElementById('conteneur');
	divInfo3 =document.getElementById('small1');
	divInfo4 =document.getElementById('small2');
 
	if (divInfo1.style.display == 'none') {
		divInfo1.style.display = 'block';
		divInfo4.style.display = 'block';
		divInfo2.style.display = 'none';
		divInfo3.style.display = 'none';
	}
	else
	divInfo.style.display = 'none';
};
 
function switchInfoPerso2() {
	divInfo1 =document.getElementById('conteneur');
	divInfo2 =document.getElementById('maquettes');
	divInfo3 =document.getElementById('small2');
	divInfo4 =document.getElementById('small1');
 
	if (divInfo1.style.display == 'none') {
		divInfo1.style.display = 'block';
		divInfo4.style.display = 'block';
		divInfo2.style.display = 'none';
		divInfo3.style.display = 'none';
	}
	else
	divInfo.style.display = 'none';
};

Merci par avance pour votre aide!!
Bonne journée

**ryan** · 29/01/2015, 12h43

Yop!

Un truc du genre:

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
 
<!DOCTYPE HTML>	
<html>
<head>
<title>foo</title>
<script type="text/javascript">
function edit(theid)
{
        var fieldId;
        var textId;
        var theField;
        var theText;
        
        // on trouve tous les textes = tous les éléments de la classe "editabe"
        var textArray = document.getElementsByClassName("editable");
        var i;
        
        // pour chaque texte
        for (i = 0; i < textArray.length; i++) 
        {
                // on déduit l'id du champ correspondant au texte 
                textId  = textArray[i].getAttribute("id");
                fieldId = textId.replace("text", "field");
                
                // on efface le champ de l'écran
                theField = document.getElementById(fieldId);
                theField.style.display = "none";
                
                // on actualise le texte avec la valeur du champ correspondant
                textArray[i].firstChild.nodeValue = theField.value;
                textArray[i].style.display = "inline";
        }
        
        // on déduit les ids du texte et du champs correpondant au bouton cliqué
        fieldId = theid.replace("button", "field");
        textId = theid.replace("button", "text");
        
        // on efface le texte de l'écran
        theText = document.getElementById(textId);
        theText.style.display = "none"; 
        
        // on affiche le champ
        theField = document.getElementById(fieldId);
        theField.style.display = "inline";
}
</script>
<style>
.field
{
        display: none;
}
</style>
</head>
<body>
<form>
 
<h3 class='editable' id='textnom'>Nom: Valjean</h3>
<input class='field' id='fieldnom' value='Valjean' />
<input type='button' value='Modifier' id='buttonnom' onclick='edit(this.id);' />
 
<br/><br/>
 
<h3 class='editable' id='textprenom'>Prénom: Jean</h3>
<input class='field' id='fieldprenom' value='Jean' />
<input type='button' value='Modifier' id='buttonprenom' onclick='edit(this.id);' />
 
</form>
</body>
</html>

L'affichage, c'est pas trop ça, et il faut aussi déterminer comment sortir du mode édition en fin de processus.

**Bovino** · 29/01/2015, 13h36

GuiA7, ton code HTML est une véritable horreur.
Avant d'essayer de faire quoi que ce soit avec JavaScript, il est important de produire du HTML correct.

Un id doit être unique dans la page.
Un lien (balise <a>) ne peut pas contenir un autre lien. Et un lien qui contient un autre lien ne peut pas contenir un input et encore moins de type submit.
Si ta balise ne correspond pas à un lien, alors il ne faut pas utiliser une balise <a>.

Bref, JavaScript travaille sur le DOM, qui lui-même est construit à partir de la structure HTML, si le HTML est incorrect, tu auras toujours de gros problèmes.

Appliquer un même script sur différents éléments de même type

JavaScript

Vue hybride

Discussions similaires

Partager

Partager