Effacement champs lors d'ajout d'autre

**Fredo8** · 12/05/2015, 09h18

Bonjour,

Pour une publication, je peux avoir un ou plusieurs auteur/editeur.
Donc dans le formulaire j'ai créer un bouton "+" pour pouvoir ajouter autant qu'il en faut.
Tout fonctionne bien mais y a un hic.
A chaque fois que le clique sur le bouton "+" pour ajouter un auteur, cela efface nom/prenom etc des autres auteurs déjà rempli ce qui est très gênant.

Pourquoi cela ?
Y a-t-il une parade et eviter cela ?

Code coté HTML :

Code html :

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

1
2
3
4
<div id="addInput_auteur" class="addInput_auteur"></div>
	<label for="add_Author" class="label_aut+">
		<input type="button" name="+" value="+" id="add_Author" class="btn_add" onclick="add_auteur();">
	</label>

Code coté JS

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
function add_auteur(){
	var input = addInput_auteur.innerHTML;
	//addInput.innerHTML = input + '<input type="text" name="ch_toto[]" />\n';
	var text = '<label class="label_type_c">Type contribute:<abbr class="required" title="required">*</abbr>:';
	text += '<SELECT name="ch_type_contr[]" id="ch_type_contr" size="1">';
	text += '<option value="" >select</option>';
	text += '<option value="author">author</option>';
	text += '<option value="editor">editor</option>';
	text += '<option value="both">both</option></select></label>';
	text += '<label class="label_autN"> first name:<abbr class="required" title="required">*</abbr>:';
	text += '<input type="text" name="ch_auteur_fn[]" id="ch_auteur_fn" maxlength="45"></label>';
	text += '<label class="label_midN">mid. name:';
	text += '<input type="text" name="ch_auteur_mn[]" id="ch_auteur_mn" maxlength="8"></label><br/>';
	text += '<label class="label_lastN">last name:<abbr class="required" title="required">*</abbr>:';
	text += '<input type="text" name="ch_auteur_ln[]" id="ch_auteur_ln" maxlength="45"></label>';
	addInput_auteur.innerHTML = input + text + '\n<br>';
}

Merci de votre aide

**Bovino** · 12/05/2015, 09h25

Tout fonctionne bien mais y a un hic.

Donc en fait, tout ne fonctionne pas bien quoi...

A chaque fois que le clique sur le bouton "+" pour ajouter un auteur, cela efface nom/prenom etc des autres auteurs déjà rempli

Oui, c'est exactement ce que tu demandes de faire :

Code :

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

addInput_auteur.innerHTML = input + text + '\n<br>';

Tu demandes bien de remplacer le contenu, pas de le concaténer à l'existant.

**Fredo8** · 12/05/2015, 09h36

Tout fonctionne bien mais y a un hic.
Donc en fait, tout ne fonctionne pas bien quoi...

Ba coté programmation, tout fonctionne, juste coté confort utilisateur

Tu demandes bien de remplacer le contenu, pas de le concaténer à l'existant.

Ah, et comment concatène les nouveaux champs à l'existant ?

**Bovino** · 12/05/2015, 09h41

Bah, en JavaScript, la concaténation, ça se fait avec +.

Code :

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

addInput_auteur.innerHTML += input + text + '\n<br>';

**Fredo8** · 12/05/2015, 09h52

Marche pas et c'est même pire.
C'est efface toujours et au lieu d'ajouter 1 auteur ça ajoute 2.

(désolé suis pas très bon en JS)

**Bovino** · 12/05/2015, 10h02

Arf... au temps pour moi, j'avais mal lu le code...

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
function add_auteur(){
	var text = '<label class="label_type_c">Type contribute:<abbr class="required" title="required">*</abbr>:';
	text += '<SELECT name="ch_type_contr[]" id="ch_type_contr" size="1">';
	text += '<option value="" >select</option>';
	text += '<option value="author">author</option>';
	text += '<option value="editor">editor</option>';
	text += '<option value="both">both</option></select></label>';
	text += '<label class="label_autN"> first name:<abbr class="required" title="required">*</abbr>:';
	text += '<input type="text" name="ch_auteur_fn[]" id="ch_auteur_fn" maxlength="45"></label>';
	text += '<label class="label_midN">mid. name:';
	text += '<input type="text" name="ch_auteur_mn[]" id="ch_auteur_mn" maxlength="8"></label><br/>';
	text += '<label class="label_lastN">last name:<abbr class="required" title="required">*</abbr>:';
	text += '<input type="text" name="ch_auteur_ln[]" id="ch_auteur_ln" maxlength="45"></label>';
	addInput_auteur.innerHTML += text + '\n<br>';
}

Sauf qu'en faisant ça, tu obtiens des id identiques dans la page, ce qui n'est pas autorisé.

**Fredo8** · 12/05/2015, 10h31

J'ai enlevé les id mais cela ne change rien.

Y a-t-il une façon simple pour avoir des id différent dans ce cas ?

**Fredo8** · 13/05/2015, 12h19

Bon j'en suis là :

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
function add_auteur()
{
	//var input = addInput_auteur.innerHTML; 
 
	var text = '<label class="label_type_c">Type contribute:<abbr class="required" title="required">*</abbr>:';
	text += '<SELECT name="ch_type_contr[]" size="1">'; 
	text += '<option value="" >select</option>';
	text += '<option value="author">author</option>';
	text += '<option value="editor">editor</option>';   
	text += '<option value="both">both</option></select></label>';	
	text += '<label class="label_autN"> first name:<abbr class="required" title="required">*</abbr>:'; 
	text += '<input type="text" name="ch_auteur_fn[]" maxlength="45"></label>';  
	text += '<label class="label_midN">mid. name:';
	text += '<input type="text" name="ch_auteur_mn[]" maxlength="8"></label><br/>';
	text += '<label class="label_lastN">last name:<abbr class="required" title="required">*</abbr>:';
	text += '<input type="text" name="ch_auteur_ln[]" maxlength="45"></label>';
 
	addInput_auteur.innerHTML += text + '\n<br>';
}

Mais toujours le même problème : les champs s'effacent lors d'ajout d'un nouvel auteur.
Les id ont été enlevé (en attendant de trouver une solution pour avoir un id unique à chaque fois).

**Bovino** · 13/05/2015, 12h41

Nom de Zeus ! Je viens de comprendre.

Quand tu dis que les champs s'effacent, c'est qu'ils perdent leur valeur et non qu'ils disparaissent du formulaire.

Effectivement, avec ta méthode, c'est logique puisque lorsque tu modifies la valeur d'un champ, tu ne modifies pas le code HTML.
Tu as plusieurs méthodes possibles pour pallier ce désagrément.

• Utiliser les méthodes du DOM (createElement(), appendChild(), etc.).
• Avant la modification de la div, boucler sur les champs de formulaire et si besoin, modifier leur attribut value ou selected (setAttribute()) pour les options des select.
• Les deux méthodes précédentes étant assez fastidieuses et verbeuses, utiliser insertAdjacentHTML() :

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
function add_auteur(){
	var text = '<label class="label_type_c">Type contribute:<abbr class="required" title="required">*</abbr>:';
	text += '<SELECT name="ch_type_contr[]" size="1">'; 
	text += '<option value="" >select</option>';
	text += '<option value="author">author</option>';
	text += '<option value="editor">editor</option>';   
	text += '<option value="both">both</option></select></label>';	
	text += '<label class="label_autN"> first name:<abbr class="required" title="required">*</abbr>:'; 
	text += '<input type="text" name="ch_auteur_fn[]" maxlength="45"></label>';  
	text += '<label class="label_midN">mid. name:';
	text += '<input type="text" name="ch_auteur_mn[]" maxlength="8"></label><br/>';
	text += '<label class="label_lastN">last name:<abbr class="required" title="required">*</abbr>:';
	text += '<input type="text" name="ch_auteur_ln[]" maxlength="45"></label>';
 
	addInput_auteur.insertAdjacentHTML('beforeend', text);
}

**Fredo8** · 13/05/2015, 12h53

Nom de Zeus ! Je viens de comprendre.
Quand tu dis que les champs s'effacent, c'est qu'ils perdent leur valeur et non qu'ils disparaissent du formulaire.

Exactement, c'est vrai que je n'ai pas été très clair dessus.

En tout cas, ça marche !!
Merci Bovino.

Reste plus à gérer cette histoire d'id.

**Bovino** · 13/05/2015, 12h59

Pourquoi as-tu besoin d'id ?
Sinon, une solution peut être d'utiliser un compteur que tu stockes par exemple dans le dataset de addInput_auteur et que tu incrémentes en fin de fonction.

**Fredo8** · 13/05/2015, 14h46

Envoyé par Bovino

Pourquoi as-tu besoin d'id ?
Sinon, une solution peut être d'utiliser un compteur que tu stockes par exemple dans le dataset de addInput_auteur et que tu incrémentes en fin de fonction.

Pour le fonctionnement même du programme à rien.

Après il va servir un peu pour miss CSS mais surtout pour l'accessibilité numérique où on doit utilisé les balise <label> avec un for qui tape sur l'id de l'input.

Le problème est que le formulaire est diviser en étapes avec des next/back donc je dois reconstruire la liste des auteurs.
Sans l'id, sans fait sans problème avec une boucle for sur la longueur du tableau (tableau du name).
Mais après pour mettre pour id au bon endroit... je voie qq chose comme ça id="nom_indice_tableau".

Et coté JS, comment peut-on savoir le dernier indice du tableau ?

**Bovino** · 13/05/2015, 15h11

Pour ce qui est des CSS, tu peux passer par une classe commune dans ce cas.
Pour les label, n'oublie pas qu'il y a deux façons de lier un label et un champ :

Code html :

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

1
2
3
4
5
6
<label for="ident">Libellé</label>
<input id="ident" />
<!-- ou alors -->
<label>
    Libellé <input />
</label>

**Fredo8** · 13/05/2015, 15h56

Je suis presque sûr que pour l'accessibilité numérique, il y a qu'une seul façon : celle du for + id.

cf : http://webaim.org/techniques/forms/controls

**Bovino** · 13/05/2015, 16h05

Pas selon d'autres sources : http://accede-web.developpez.com/tut...dations#LVII-A.

**Fredo8** · 13/05/2015, 16h55

Suivant ton lien (qui est intéressant au passage) :

Chaque champ de formulaire doit être associé à un intitulé.

Pour cela, procéder de la sorte.

Utiliser <label> pour baliser chaque intitulé.
Ajouter un attribut for sur chaque balise <label> ainsi qu'un attribut id sur chaque champ.
Renseigner avec une valeur identique les attributs id et for de chaque couple intitulé/champ.

**Bovino** · 13/05/2015, 16h56

Oui, je sais, j'ai vu ça après, en fait, je regardais surtout la syntaxe.

Effacement champs lors d'ajout d'autre

JavaScript

Discussions similaires

Partager

Partager