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 380
    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 032
    J'aime reçus:
    291
    Attention parce que là plusieurs éléments avec les mêmes "id".
     
  4. sim100
    sim100 WRInaute passionné
    Inscrit:
    2 Février 2003
    Messages:
    1 380
    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 380
    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
[AIDE] ".php" ajouté à la fin des fichiers, étrange... URL Rewriting et .htaccess 22 Avril 2010
Demande d'aide Demandes d'avis et de conseils sur vos sites 3 Août 2020
Nouveau dans le SEO, aide de site Débuter en référencement 31 Juillet 2020
aide robot.txt svp Débuter en référencement 26 Mars 2020
Site entraide coronavirus Demandes d'avis et de conseils sur vos sites 26 Mars 2020
Aide référencement blog sur Wix Demandes d'avis et de conseils sur vos sites 29 Novembre 2019
Aide sur le format de mon fichier robots.txt Crawl et indexation Google, sitemaps 25 Octobre 2019
Besoin d'aide pour comprendre mon Analyse Dareboost Débuter en référencement 24 Août 2019
WordPress Avis sur mon site + aide Demandes d'avis et de conseils sur vos sites 29 Juin 2019
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice