Aide ajout de champs en Javascript

sim100

WRInaute passionné
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

Code:
<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

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

Code:
<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" />
 

sim100

WRInaute passionné
Merci je vais essayer ça aujourd'hui.

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

Merci en tout cas
 

guicara

WRInaute passionné
Petites mises à jour suite à l'intervention de spout :

Code:
<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
 

chanteur06

Nouveau WRInaute
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

Nouveau WRInaute
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
 

Discussions similaires

Haut