Discussion :

[Fredo8]

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]

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]

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]

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]

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]

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