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 373
    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 558
    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 168
    J'aime reçus:
    345
    Attention parce que là plusieurs éléments avec les mêmes "id".
     
  4. sim100
    sim100 WRInaute passionné
    Inscrit:
    2 Février 2003
    Messages:
    1 373
    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 558
    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 373
    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
PHP ajout page automatique tableau de video AIDE SVP :) !!! Développement d'un site Web ou d'une appli mobile 26 Août 2009
Aide mémoire de fin d’étude Le café de WebRankInfo Aujourd'hui à 00:52
Une aide pour une fonction récursive... Développement d'un site Web ou d'une appli mobile 18 Juillet 2022
Aide petite regex Développement d'un site Web ou d'une appli mobile 28 Juin 2022
Aide données structurées produits Woocommerce Débuter en référencement 4 Mai 2022
WordPress A l'aide ! Mon site est spammé, mon domain rating prend un sacré coup Débuter en référencement 26 Avril 2022
WordPress Concours SEO : aide pour référencer site sur Boinmadig Demandes d'avis et de conseils sur vos sites 31 Mars 2022
Pose de liens : Besoin d'aide d'ordre technique et besoin d'éclairage Netlinking, backlinks, liens et redirections 9 Mars 2022
De l'aide pour ma localisation dans les balises SEO Demandes d'avis et de conseils sur vos sites 23 Février 2022
Comparateur de prix de bien commun - Aide / partenariat Demandes d'avis et de conseils sur vos sites 23 Décembre 2021
Avis et aide sur quel-canape Demandes d'avis et de conseils sur vos sites 13 Décembre 2021
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