Ajouter plusieurs champs dans un formulaire

Version imprimable

Bonjour !

J'ai trouvé un petit script que je voudrais adapter à ma situation. Il s'agit de deux lignes qui ajoutent un champs "fichier" après clic sur bouton :

Code:

1
2
3
4
5
6
7
8
9
function create_champ(i) {
 
var i2 = i + 1;
 
document.getElementById('leschamps_'+i).innerHTML = "<input type="file" name="fichier_'+i+'"></span>';
document.getElementById('leschamps_'+i).innerHTML += (i <= 10) ? '<br /><span id="leschamps_'+i2+'"><a href="javascript:create_champ('+i2+')">Ajouter un champs</a></span>' : '';
 
 
}

Le soucis, c'est que j'aimerai ajouter plusieurs champs d'un coup :

Code:

1
2
3
4
5
6
7
8
9
10
<label for="service">Service :</label><select name='service' style="width:300px">
    <option> </option>
    <option>[...]</option>
</select><br />
<label for="date">Date de début :</label><input type="text" id="dateDebS" style="width:300px">   
<label for="roleS"> Role Service :</label><input type="text" id="roleS" style="width:300px"> 
<label for="chargeS">Charge Service :</label><input type="text" id="chargeS" style="width:300px"> 
<label for="JourH">Jour/Homme :</label><input type="text" id="JourH" style="width:300px"> 
<label for="PLACJH">PLAC JH :</label><input type="text" id="PLACJH" style="width:300px"> 
<span id="leschamps_2"><a href="javascript:create_champ(2)">Ajouter</a></span>

Car à un service correspond une date de début, un rôle, une charge, des jours/hommes et un PLACJH..

Seulement voilà, je suis perdue avec les ' et " mais aussi avec les id de champs. Un peu d'aide serai la bienvenue !

En vous remerciant! Bonne journée !

18/04/2013, 14h15
Kaamo

Citation:

Seulement voilà, je suis perdue avec les ' et " mais aussi avec les id de champs

La coloration syntaxique permet d'aider. Par exemple, ici, les chaines de caractères sont en rouge donc tant que tu n'arriveras pas à avoir ce comportement, c'est qu'elles ne seront pas correctes !

Je te conseille d'utiliser ' (simple quote) plutôt que " (double quote). Pour la simple est bonne raison que c'est plus simple ainsi d'écrire du HTML dans des chaines Javascript
Donc pour une chaine de caractère contenant du code HTML :

Code:

var maChaine = '<input type="file" name="fichier_'+i+'" id="fichier_'+i+'"></span>';

Pour ce qui est des id, il faut qu'ils soient uniques par page. Si ton i est variable, il n'y aura donc pas de problème.

j'ai pas vérifié ton code, mais tu avait un

Citation:

à la place d'un

Citation:

Il n'y a plus d'erreur de concaténation :

Code:

1
2
3
4
5
6
7
8
9
10
 
function create_champ(i) {
 
var i2 = i + 1;
 
document.getElementById('leschamps_'+i).innerHTML = '<input type="file" name="fichier_'+i+'"></span>';
document.getElementById('leschamps_'+i).innerHTML += (i <= 10) ? '<br /><span id="leschamps_'+i2+'"><a href="javascript:create_champ('+i2+')">Ajouter un champs</a></span>' : '';
 
 
}

Sinon voici un code qui marche, j'ai pas eu le temps de l'optimiser par contre. Ya sans doute des trucs pas super élégant.

index.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<html>
	<head>
		<script type="text/javascript" src="bouton.js"></script>
	</head>
	<body>
		<a href="#" id="add">Ajouter un champs file</a>
		<form id="target" method="post" enctype="multipart/form-data">
 
		</form>
	</body>
</html>

button.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
window.onload = function(){
	function button(){ // On créer une pseudo classe pour éviter les conflits de variable
		var compteur = 0; // Compteur de champs input.
 
		function add(){
			var form = document.getElementById("target"); // On récupère le formulaire ou seront inséré les champs input.
			form.innerHTML += '<input type="file" name="file'+compteur+'"/><br />'; // On insère les champs.
			compteur++; // On incremente le compteur.
		};
 
		var link = document.getElementById("add"); // On récupère le lien
 
		link.onclick = function(e){
			// Lors d'un clic sur le lien, on annule le comportement par defaut
			e.preventDefault();
			add(); // Puis on appelle la méthode add.
		};
	};
	button();
};

Merci ! Je garde en tête de privilégier les ' ...

Code:

1
2
3
4
5
6
7
8
9
function create_champ(i) {
 
var i2 = i + 1;
var champs = '<label for="service">Service : </label><select name="service'+i+'" style="width:300px"><option> </option><option>[...]</option></select><br /><label for="date">Date de début :</label><input type="text" id="dateDebS'+i+'" style="width:300px">   <label for="roleS"> Role Service :</label><input type="text" id="roleS'+i+'" style="width:300px"> <label for="chargeS">Charge Service :</label><input type="text" id="chargeS'+i+'" style="width:300px"> <label for="JourH">Jour/Homme :</label><input type="text" id="JourH'+i+'" style="width:300px"> <label for="PLACJH">PLAC JH :</label><input type="text" id="PLACJH'+i+'" style="width:300px">';
 
document.getElementById('leschamps_'+i).innerHTML = champs;
document.getElementById('leschamps_'+i).innerHTML += (i <= 10) ? '<br /><span id="leschamps_'+i2+'"><a href="javascript:create_champ('+i2+')">Ajouter</a></span>' : '';
 
}

Prochaine étape, remplir le SELECT avec des données extraites de la bdd, en php... Je vais m'amuser !

Bonne journée et merci encore ! :)

Et pour ouvrir les horizons, voici une autre alternative :

Code:

1
2
3
4
5
6
7
function create_champ(i) {
  var inputFile1 = document.createElement("input");
  inputFile1.name = 'inputFile'+i;
  inputFile1.id = 'inputFile'+i;
  inputFile1.type = 'file';
  document.getElementById('leschamps_'+i).appendChild(inputFile1);
}

18/04/2013, 15h57
scandinave

Oui, voila une manière plus propre que la mienne faite à la va-vite d’implémenter ma méthode add() .