IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Ajout dynamique d'input dans un formulaire


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Janvier 2008
    Messages
    7
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2008
    Messages : 7
    Par défaut Ajout dynamique d'input dans un formulaire
    Bonjour, à tous
    Voila je sollicite votre aide pour un problème qui me laisse perplexe depuis 2 jours..

    Je suis en train de coder un système de multi-upload d'image (qui marche). Le truc c'est que je dois associer à chaque nouvelle image 2 boutons radios qui correspondent au choix d'alignement de l'image en question (droite ou gauche).

    Le problème vient du fait que l'ajout des inputs se fait dynamiquement et je n'arrive pas à récupérer la valeur des boutons radios associés à chaque input.

    Je m'explique..

    Voici le formulaire de mutliupload :


    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <div id="upload">
    <form name="uploadImg" action="upload.php" method="post" enctype="multipart/form-data">
    <div id="fichiers">
    Aucun fichier à uploader
    </div>
    <br/>
    <input type="hidden" value="'. $lien .'" name="nomChantier"/>
    Charger l\'image :
    <!-- CE SPAN RECOIT LES DIFFERENTS INPUTS CREES PUIS CACHES UNE FOIS UTILISES -->
    <span id="input"></span>
    <br/><br />
    <input type="submit" value="Uploader"/>
    </form>
    </div>


    A chaque fois que l'on rajoute un fichier à uploader, on passe l'input dans le span et on le rend invisible
    On rajoute une entrée avec un lien de supression, le nom de l'image et les fameux boutons radio dans la div "fichier"


    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    function ajouterFichier(input)
    {
    if(nbrFichiers == 0)
    $("fichiers").removeChild($("fichiers").firstChild);
     
    //Création de la ligne dans la liste des fichiers à uploader
    var fichier = document.createElement("p");
     
    //Image de suppression
    var image = document.createElement("img");
    image.src = "images/suppr.gif";
    image.alt = "supprimer";
    Element.setStyle(image, {border: "0px", verticalAlign: "top"});
     
    //Lien pour supprimer
    var lnk = document.createElement("a");
    lnk.href= "#";
    lnk.onclick = function () {
    supprimerFichier(fichier, input);
    }
    //Ajout de l'image dans la balise de lien
    lnk.appendChild(image);
     
    //Ajout des boutons radios
    var radioAv = document.createElement("input");
    radioAv.type = "radio";
    radioAv.name = "_" + getFileName(input.value);
    radioAv.value = "Av";
     
    var radioAp = document.createElement("input");
    radioAp.type = "radio";
    radioAp.name = "_" + getFileName(input.value);
    radioAp.value = "Ap";
     
    //Ajout du lien à la ligne de la liste
    fichier.appendChild(lnk);
     
     
    //Ajout du nom du fichier
    fichier.appendChild(document.createTextNode(" " + getFileName(input.value) + " "));
    Element.setStyle(fichier, {margin: "0", padding: "0"});
     
    //Ajout des boutons radios à la ligne
    fichier.appendChild(radioAv);
    fichier.appendChild(document.createTextNode("Av"));
    fichier.appendChild(radioAp);
    fichier.appendChild(document.createTextNode("Ap"));
     
    //Ajout de l'item à la liste
    $("fichiers").appendChild(fichier);
    nbrFichiers++;
     
    //Affectation de l'attribut name de l'input
    input.name = getFileName(input.value);
     
    new Effect.Highlight(fichier, {startcolor: "#7fd9ff", endcolor: "#FFFFFF"});
     
    //Création d'un nouvel input pour un nouveau fichier
    Element.hide(input);
    creerInput();
    }

    Le problème vient du fait que étant créer dynamiquement mes boutons radios il ne sont pas pris en compte lors de l'envoie du formulaire

    Ainsi dans mon fichier php qui upload les images

    lorsque j'essai de récuperer la valeur des radios il ne trouve rien

    $align = "_".$_POST[$name_file];

    Une idée ??

    Merci d'avance

  2. #2
    Membre Expert
    Avatar de emmanuel.remy
    Inscrit en
    Novembre 2005
    Messages
    2 855
    Détails du profil
    Informations personnelles :
    Âge : 56

    Informations forums :
    Inscription : Novembre 2005
    Messages : 2 855
    Par défaut Pas de radio actif
    Salut et bienvenue sur les forums de dvp.com,

    Je pense que ton souci vient du fait qu'aucun bouton radio n'est actif (coché). Si c'est le cas le navigateur ne transmet pas le champ. Tu peux essayer en cochant un des boutons et observer le résultat.
    Enfin tu peux utiliser un outil comme firebug ou la console de Google Chrome pour voir les entêtes de la requête post.

    ERE

  3. #3
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    Pour moi le problème proviendrait majoritairement du fait de l'attribution dynamique du name ...
    cf ce thread http://www.developpez.net/forums/d53...ynamique-form/
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  4. #4
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Janvier 2008
    Messages
    7
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2008
    Messages : 7
    Par défaut
    Salut et merci d'avoir pris le temps de me lire

    Après avoir vérifié avec FireBug mes craintes se sont confirmées.. En fait les champs ne sont pas pris en compte comme faisant parti du formulaire, ils ne sont pas présents dans les entêtes POST lors du passage du formulaire.. Du coup je vais mater le topic que tu m'a filé en espérant y trouver mon bonheur

  5. #5
    Membre Expert
    Avatar de emmanuel.remy
    Inscrit en
    Novembre 2005
    Messages
    2 855
    Détails du profil
    Informations personnelles :
    Âge : 56

    Informations forums :
    Inscription : Novembre 2005
    Messages : 2 855
    Par défaut
    Re,

    As tu essayé en cochant un des radios ?
    Parce que pour tout te dire, j'ai pris ton code, fais un essai avec FF 3.5 et cela fonctionne. Mais là dessus je rejoins Spacefrog et c'est peut-être aussiun souci de création selon la version du navigateur

    Ci-dessous ton code mis en forme (de façon très sale, mais fonctionnel) utilisé pour reproduire ton souci:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=windows-1250">
      <meta name="generator" content="PSPad editor, www.pspad.com">
      <title></title>
      <script type="text/javascript">
     
    function $(id) {
      return document.getElementById(id);
    }
     
    function ajouterFichier(input)
    {
     
    $("fichiers").removeChild($("fichiers").firstChild);
     
    //Création de la ligne dans la liste des fichiers à uploader
    var fichier = document.createElement("p");
     
    //Image de suppression
    var image = document.createElement("img");
    image.src = "images/suppr.gif";
    image.alt = "supprimer";
     
    //Lien pour supprimer
    var lnk = document.createElement("a");
    lnk.href= "#";
    lnk.onclick = function () {
    supprimerFichier(fichier, input);
    }
    //Ajout de l'image dans la balise de lien
    lnk.appendChild(image);
     
     
    //Ajout des boutons radios
    var radioAv = document.createElement("input");
    radioAv.type = "radio";
    radioAv.name = "_" + "TOTO.TXT";
    radioAv.value = "Av";
     
    var radioAp = document.createElement("input");
    radioAp.type = "radio";
    radioAp.name = "_" + "TOTO.TXT";
    radioAp.value = "Ap";
     
    //Ajout du lien à la ligne de la liste
    fichier.appendChild(lnk);
     
     
    //Ajout du nom du fichier
    fichier.appendChild(document.createTextNode(" TOTO.TXT "));
     
    //Ajout des boutons radios à la ligne
    fichier.appendChild(radioAv);
    fichier.appendChild(document.createTextNode("Av"));
    fichier.appendChild(radioAp);
    fichier.appendChild(document.createTextNode("Ap"));
     
    //Ajout de l'item à la liste
    $("fichiers").appendChild(fichier);
    //nbrFichiers++;
     
    //Affectation de l'attribut name de l'input
    input.name = input.value;
     
     
    }  
      </script>
     
      </head>
      <body>
    <div id="upload">
    <form name="uploadImg" action="/" method="post">
    <div id="fichiers">
    Aucun fichier à uploader
    </div>
    <br/>
    <input type="hidden" value="'. $lien .'" name="nomChantier"/>
    Charger l\'image :
    <!-- CE SPAN RECOIT LES DIFFERENTS INPUTS CREES PUIS CACHES UNE FOIS UTILISES -->
    <span id="input"></span>
    <br/>
    <input type=button onclick="ajouterFichier(this);" value="fichier" />
    <br />
    <input type="submit" value="Uploader"/>
    </form>
    </div>
      </body>
    </html>


    ERE

  6. #6
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    autre source d'inspiration:
    http://www.developpez.net/forums/d81...pload+multiple
    là les inputs de base existent déja ils sont ensuite clonés ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  7. #7
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Janvier 2008
    Messages
    7
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2008
    Messages : 7
    Par défaut
    @emmanuel.remy : ouai tkt j'ai testé en sélectionnant une valeur

    Le truc c'est que ce code je l'ai ripper en parti je sais plus trop ou. Et même si je l'ai bien compris y'a des trucs qui m'échappent.
    En plus je suis pas vraiment un spécialiste du JS (je suis plutôt prog logicielle) donc j'apprends pas mal de truc en codant.

    Je suis sur une piste là, je vais faire quelques tests et je vous tiens au courant

    Merci de votre aide en tout cas

  8. #8
    Membre Expert
    Avatar de emmanuel.remy
    Inscrit en
    Novembre 2005
    Messages
    2 855
    Détails du profil
    Informations personnelles :
    Âge : 56

    Informations forums :
    Inscription : Novembre 2005
    Messages : 2 855
    Par défaut
    @Nappo: avec tout ça si tu ne trouves pas ton bonheur !

    ERE

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [1.x] EmbedForm et ajout dynamique de champ dans une formulaire.
    Par Noobboy dans le forum Symfony
    Réponses: 6
    Dernier message: 10/08/2011, 15h03
  2. Ajout/Supression d'input dans un formulaire.
    Par ddelec24 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 25/09/2007, 17h56
  3. Ajout dynamique de champ dans un formulaire
    Par gendalf37400 dans le forum Ruby on Rails
    Réponses: 5
    Dernier message: 06/06/2007, 15h11
  4. ajout dynamique de contrôle dans un formulaire
    Par celiaaa dans le forum IHM
    Réponses: 2
    Dernier message: 26/02/2007, 19h23
  5. ajout de champs input dans un formulaire
    Par MV1908 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 22/08/2006, 18h31

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo