Copier un input dans plusieurs autres

Version imprimable

Bonsoir,

J'ai un formulaire à remplir pour saisir des données de formation.
à 95% du temps les données sont identiques.

J'aimerai donc pouvoir remplir que la première ligne et en cliquant sur un bouton pouvoir recopier ces données dans tous les autres input du formulaire.

Voiçi mon code :

Code:

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
 
<form method="post" id="modif-cours" action="">
<p>
 
<input class="send" type="button" value="Copier la première ligne sur les autres" />
 
<table class="liste_com">
	<tr>
		<td class="titre_liste_com">Nom</td>
		<td class="titre_liste_com">Prénom</td>
		<td class="titre_liste_com">Date</td>
		<td class="titre_liste_com">Formateur</td>
	</tr>
 
	<tr>
		<td class="liste_com"><input type="hidden" name="id_0" value="14" />
		<input type="hidden" name="id_cours" value="4" />Nom 1</td>
		<td class="liste_com">Prénom 1</td>
		<td class="liste_com"><input type="text" name="date_cours_0" id="date_cours" size="15" maxlength="15" value="2008" /></td>
		<td class="liste_com"><input type="text" name="formateur_0" id="formateur" size="30" maxlength="100" value="BRUYERE" /></td>
	</tr>
 
 
	<tr>
		<td class="liste_com"><input type="hidden" name="id_1" value="105" />
		<input type="hidden" name="id_cours" value="4" />Nom 2</td>
		<td class="liste_com">Prénom 2</td>
		<td class="liste_com"><input type="text" name="date_cours_1" id="date_cours" size="15" maxlength="15" value="2007" /></td>
		<td class="liste_com"><input type="text" name="formateur_1" id="formateur" size="30" maxlength="100" value="#" /></td>
	</tr>
 
 
	<tr>
		<td class="liste_com"><input type="hidden" name="id_2" value="108" />
		<input type="hidden" name="id_cours" value="4" />Nom 3</td>
		<td class="liste_com">Prénom 3</td>
		<td class="liste_com"><input type="text" name="date_cours_2" id="date_cours" size="15" maxlength="15" value="2007" /></td>
		<td class="liste_com"><input type="text" name="formateur_2" id="formateur" size="30" maxlength="100" value="#" /></td>
	</tr>
 
 
	<tr>
		<td class="liste_com"><input type="hidden" name="id_3" value="109" />
		<input type="hidden" name="id_cours" value="4" />Nom 4</td>
		<td class="liste_com">Prénom 4</td>
		<td class="liste_com"><input type="text" name="date_cours_3" id="date_cours" size="15" maxlength="15" value="2007" /></td>
		<td class="liste_com"><input type="text" name="formateur_3" id="formateur" size="30" maxlength="100" value="#" /></td>
	</tr>
 
 
	<tr>
		<td class="liste_com"><input type="hidden" name="id_4" value="112" />
		<input type="hidden" name="id_cours" value="4" />Nom 5</td>
		<td class="liste_com">Prénom 5</td>
		<td class="liste_com"><input type="text" name="date_cours_4" id="date_cours" size="15" maxlength="15" value="2007" /></td>
		<td class="liste_com"><input type="text" name="formateur_4" id="formateur" size="30" maxlength="100" value="#" /></td>
	</tr>
 
</table>
 
<br />
<input class="send" type="submit" value="Enregistrer" /><br />
</p>
</form>

http://www.jsp33127.fr/divers/copier_javascript.png

Le bouton en question est celui au début du code.

Je ne m'y connais pas spécialement en JavaScript c'est pour ça que je me tourne vers vous pour une petite aide.

Merci d'avance à vous.

15/11/2010, 06h50
andry.aime
Bonjour,

Un id doit être unique dans un document.
Tu récupères tous les éléments avec ce script par exemple en mettant à jour chaque élément.
Code:

1 2 3 if(reg.test(tabElts[i][attr])){tabReg.push(tabElts[i]); tabElts[i].value=tabElts[0].value;// Copier la valeur du premier élément dans tous les éléments cible. }
A+.
15/11/2010, 07h31
Surfsp33

Merci de ta réponse.

Il va falloir que je décrypte tout parce que vu mon niveau en javascript je comprend pas grand chose :oops:

Je suppose qu'il n'y a rien de plus simple ?

Merci quand même.

Re,

copie ce code dans ta page.

Ensuite tu faits:

Code:

1
2
3
4
5
6
function copier(){
var mesInputs= document.getElementsByReg(/date_cours/,'name');
for (var i=0;i<mesInputs.length;i++){
   mesInputs[i].value=mesInputs[0].value;
 }
}

A+.

Ha excélent ! :):P

Exactement ce que je voulais :)

Est-il possible de rajouter une condition dans cette ligne ?

var mesInputs= document.getElementsByReg(/date_cours/,'name');

Code:

rajoute /formateur/ pour copier aussi le formateur sur les autres lignes ?

Merci beaucoup déjà pour ta réponse

--------------
Edit :

J'ai fais deux fonctions en fait et deux boutons différents :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function copier_date(){ var mesInputs= document.getElementsByReg(/date_cours/,'name'); for (var i=0;i<mesInputs.length;i++){ mesInputs[i].value=mesInputs[0].value; } } function copier_formateur(){ var mesInputs= document.getElementsByReg(/formateur/,'name'); for (var i=0;i<mesInputs.length;i++){ mesInputs[i].value=mesInputs[0].value; }
A moins que tu es une meilleure solution ;)
}

à toi de voir tes besoins, si tu veux avoir une bouton pour chaque colonne, ton code est bon, sinon si tu veux une bouton pour les deux colonnes, tu n'as qu'à les mettre dans une seule fonction.
Code:

1 2 3 4 5 6 7 8 9 10 function copier(){ var mesInputs= document.getElementsByReg(/date_cours/,'name'); for (var i=0;i<mesInputs.length;i++){ mesInputs[i].value=mesInputs[0].value; } mesInputs= document.getElementsByReg(/formateur/,'name'); for (var i=0;i<mesInputs.length;i++){ mesInputs[i].value=mesInputs[0].value; } }
A+.

Code:

1
2
3
4
5
function copier(){
var mesInputs= document.getElementsByReg(/(date_cours|formateur)/,'name');
for (var i=0;i<mesInputs.length;i++){
   mesInputs[i].value=mesInputs[0].value;
 }

;)

15/11/2010, 10h23
andry.aime

Oui Bovino mais le problème avec ça c'est que ça va mettre la valeur du premier champ date_cours dans les champs formateurs aussi.
15/11/2010, 12h25
Bovino

Citation:

Envoyé par andry.aime

Oui Bovino mais le problème avec ça c'est que ça va mettre la valeur du premier champ date_cours dans les champs formateurs aussi.

C'est pas faux... :aie: