Aide ajout de champs en Javascript

[sim100]

Bonjour,

J'ai mon petit script qui me permet d'uploader des photos. Il y a un champs, et je peux grace à un bouton "Ajouter" ajouter plus de champs pour uploader plus de photos.

Pour l'instant, chanque fois que j'appuie sur "Ajouter", ca ajoute un champs, et cela jusqu'à l'infini. J'aimerais juste le modifier pour bloquer à 10 champs maximum. après 10 champs on me peux plus ajouter de champs.

Voila le script, si quelqu'un peut me guider.
Merci

<script type="text/javascript">
$(document).ready(function(){
	$(":input[name='add']").click(function () {
	$("div[id='file']:last").clone(true).insertAfter("div[id='file']:last");
	});
});
</script>


<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<div id="file"><input type="file" name="file[]" id="file"/></div>
</form>
<input name="add" type="button" value="Ajouter" /> <input type="submit" name="SubmitPhoto" value="Soumettre" />

 

[guicara]

Bonjour,

Il faut simplement ajouter une variable que tu incrémentes à chaque input ajouté. Et ajout cet ajout, tu vérifies simplement la valeur de cette variable.

<script type="text/javascript">
$(document).ready(function(){
	var MAX_FIELDS = 10;
	var fields = 1;
	
	$(":input[name='add']").click(function () {
		if (fields <= MAX_FIELDS) {
			$("div[id='file']:last").clone(true).insertAfter("div[id='file']:last");
			fields++;
		}
	});
});
</script>


<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
	<div id="file"><input type="file" name="file[]" id="file"/></div>
</form>

<input name="add" type="button" value="Ajouter" />
<input type="submit" name="SubmitPhoto" value="Soumettre" />

 

[spout]

Attention parce que là plusieurs éléments avec les mêmes "id".

 

[sim100]

Merci je vais essayer ça aujourd'hui.

Tu as un script mieux ou des erreurs à corriger Spout ?

Merci en tout cas

 

[guicara]

Petites mises à jour suite à l'intervention de spout :

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script><script type="text/javascript">
$(document).ready(function(){
   var MAX_FIELDS = 10;
   var fields = 1;
   
   $(":input[name='add']").click(function () {
      if (fields < MAX_FIELDS) {
         $("div[id='files']:last").clone(true).insertAfter("div[id='files']:last");
         fields++;
      }
   });
});
</script>


<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
   <div id="files"><input type="file" name="file[]" class="file"/></div>
</form>

<input name="add" type="button" value="Ajouter" />
<input type="submit" name="SubmitPhoto" value="Soumettre" />

Pour tester : http://jsbin.com/ogemov/2/edit

 

[sim100]

Super!
Ca marche nickel
Merci beaucoup

 

[chanteur06]

salut , un up , car sur ce script qui fonctionne bien, je me demande comment on récupere les valeurs de champs ajoutés dans la BDD..?
On doit prévoir des champs avec differents numéros..?
exemple: je propose ce formulaire pour un internaute identifié avec son nom, il propose une liste de produits...ou juste 1 produit ; je dois prévoir quoi dans ma BDD, juste 1 champ nommé "produit1", avec recup de l ID de l'internaute , ou plusieurs champs vides prets à recevoir les différentes lignes ajoutées...?
merci

 

[Aaymeric]

Bonjour,
Pouvez vous me dire comment
- lors de l'ajout, mettre un value différent du précédent
- rendre possible l'ajout d'upload que si le champ précédent à été complété
- donner un nom unique à chaque champs.

Je ne m'y connais pas du tout en javascipt donc tout ca reste assez flou pour moi :s