Effacement champs lors d'ajout d'autre

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:

---

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:

---

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

Citation:

---

Tout fonctionne bien mais y a un hic.

---

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

Citation:

---

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:

---

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

---

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

Citation:

---

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 :aie::mrgreen:

Citation:

---

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

---

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

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

Code:

---

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

---

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)

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

Code:

---

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

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 ?

Bon j'en suis là :

Code:

---

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

Nom de Zeus ! Je viens de comprendre. :mouarf:
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:

---

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); }

---

Citation:

---

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.

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.

Citation:

---

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 ?

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:

---

1 2 3 4 5 6

<label for="ident">Libellé</label> <input id="ident" /> <!-- ou alors --> <label> Libellé <input /> </label>

---

;)

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

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

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

Citation:

---

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.

---

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