1. ⭐⭐⭐ Grosse PROMO en cours sur ma plateforme SEO My Ranking Metrics
    Rejeter la notice

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:
    8 877
    J'aime reçus:
    263
    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
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 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
Petit nouveau en quête de repères :) Merci de votre aide Demandes d'avis et de conseils sur vos sites 25 Juin 2019
Aide pour fichier XML e-commerce 28 Mars 2019
aidez moi a référencer mon blog Problèmes de référencement spécifiques à vos sites 31 Octobre 2018
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice