Aide ajout de champs en Javascript

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par sim100, 24 Novembre 2012.

  1. sim100
    sim100 WRInaute passionné
    Inscrit:
    2 Février 2003
    Messages:
    1 383
    J'aime reçus:
    1
    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" />
    
    
     
  2. guicara
    guicara WRInaute passionné
    Inscrit:
    2 Février 2006
    Messages:
    1 583
    J'aime reçus:
    0
    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" />
     
  3. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 179
    J'aime reçus:
    330
    Attention parce que là plusieurs éléments avec les mêmes "id".
     
  4. sim100
    sim100 WRInaute passionné
    Inscrit:
    2 Février 2003
    Messages:
    1 383
    J'aime reçus:
    1
    Merci je vais essayer ça aujourd'hui.

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

    Merci en tout cas
     
  5. guicara
    guicara WRInaute passionné
    Inscrit:
    2 Février 2006
    Messages:
    1 583
    J'aime reçus:
    0
    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
     
  6. sim100
    sim100 WRInaute passionné
    Inscrit:
    2 Février 2003
    Messages:
    1 383
    J'aime reçus:
    1
    Super!
    Ca marche nickel
    Merci beaucoup
     
  7. chanteur06
    chanteur06 Nouveau WRInaute
    Inscrit:
    17 Février 2015
    Messages:
    1
    J'aime reçus:
    0
    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
     
  8. Aaymeric
    Aaymeric Nouveau WRInaute
    Inscrit:
    28 Mars 2015
    Messages:
    1
    J'aime reçus:
    0
    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
     
Chargement...
Similar Threads - Aide ajout champs Forum Date
Demande aide serveur dédié windows server 2003 ( ajouter des roles ) Administration d'un site Web 15 Mars 2011
Besoin d'aide pour le lancement de mon Application Demandes d'avis et de conseils sur vos sites 12 Août 2021
Besoin d'aide pour la compréhension d'une application Développement d'un site Web ou d'une appli mobile 1 Août 2021
J’ai disparu de la SERP… A l’aide Débuter en référencement 25 Juillet 2021
M'aider à comprendre... Demandes d'avis et de conseils sur vos sites 16 Juin 2021
Comment devenir freelance à l’aide d’internet ? Google : l'entreprise, les sites web, les services 17 Mai 2021
Besoin d'aide SEO pour mon site Débuter en référencement 13 Mai 2021
[AIDE] Diffuser des publicités vidéo (pre-roll) avec Ad Manager Monétisation d'un site web 12 Mai 2021
Aide SEO pour mon site investirbordeaux.fr Demandes d'avis et de conseils sur vos sites 3 Mai 2021
Demande d'aide pour mon nouveau site Demandes d'avis et de conseils sur vos sites 12 Avril 2021