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 :

Creer et supprimer des champs dynamiquement


Sujet :

JavaScript

  1. #1
    Candidat au Club
    Inscrit en
    Janvier 2008
    Messages
    3
    Détails du profil
    Informations forums :
    Inscription : Janvier 2008
    Messages : 3
    Points : 2
    Points
    2
    Par défaut Creer et supprimer des champs dynamiquement
    Salut à tous,

    je tourne en rond depuis quelques jours, je vous expose mon problème : j'essaie d'ajouter et supprimer des input 'text' de ma page web. Donc un champ par défaut, un bouton supprimer et un bouton ajouter.

    Donc la j'en suis à "l'ajout de champs marche", et "la suppression marche, mais une seule fois". C'est ça le problème

    Voici le html et les fonctions que j'utilise : (les borders servent uniquement à bien voir si c'est le bon champ qui est supprimé)

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <script type = "text/javascript">
    var nbrechamps = 1;
    </script>
    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
    echo "<tr><td align = 'left' valign = 'top'>Noms donnés à ce taxon : <span class = 'etoile'>*</span> : ";
    echo "<br /><span class = 'small'>(Un nom minimum)</span></td>";
    echo "<td align = 'left' valign = 'top'>";
     
    echo "<table cellspacing = '0' cellpadding = '0'><tr><td align = 'left' valign = 'top'>";
    echo "<div id = 'divChamps'>";
    echo "<input type = 'text' name = 'AjoutTaxon_type1' maxlength = '255' size = '50' />";
    echo "</div>";
    echo "</td><td align = 'left' valign = 'bottom' style = 'padding-bottom:3px;'>";
    ?>
    <a id="boutonSuppr" href="#" onclick="supprime_champ('divChamps',nbrechamps,'AjoutTaxon_type',50,255,'taxon_ajout','boutonSuppr'); nbrechamps = nbrechamps - 1;"><img src="Images/IcoSuppr.gif" alt="Supprimer un champ de nommage" title="Supprimer un champ de nommage" /></a>
    <?php
    echo "</td></tr></table>";
    ?><br /><a href = "#" onClick = "nbrechamps = nbrechamps + 1; cree_champ('divChamps',nbrechamps,'AjoutTaxon_type',50,255,'taxon_ajout','boutonSuppr');"><img src = "Images/Plus.gif" alt = "Ajouter un champ de nommage" title = "Ajouter un champ de nommage" /> Ajouter un champ</a>
    <?php
    echo "</td></tr>";
    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
     
    function supprime_champ(idDiv,idChamp,champNom,champSize,champMaxlength,nomForm,idSupprButton) {
    var search = '<br><br><input style="border: '+idChamp+'px solid black;" name="'+champNom+idChamp+'" size="'+champSize+'" maxlength="'+champMaxlength+'" type="text">';
     
    var code = document.getElementById(idDiv).innerHTML;
     
    alert(search+"\n\n\n"+code);
     
    // On regarde si le code HTML du champ existe dans le div contenant les champs - si c'est le cas, on efface le code correspondant
    var pos = 0; pos = code.indexOf(search);
    if( pos != -1 ){
    document.getElementById(idDiv).innerHTML = str_replace(search,'',code);
    }
    document.getElementById(idSupprButton).onclick = "nbrechamps=supprime_champ('"+idDiv+"',"+idChamp+",'"+champNom+"',"+champSize+","+champMaxlength+",'"+nomForm+"','"+idSupprButton+"')";
    	alert("Apres suppression, l'onclick du bouton est : \n\n"+document.getElementById(idSupprButton).onclick);
    }
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
    function cree_champ(idDiv,newID,champNom,champSize,champMaxlength,nomForm,idSupprButton) {
     
    	// Ajout dans le code de la div du code du champ à ajouter
    	document.getElementById(idDiv).innerHTML += '<br /><br /><input style="border:'+newID+'px solid black;" name="'+champNom+newID+'" size="'+champSize+'" maxlength="'+champMaxlength+'" type="text"/>';
     
    	// Mise a jour du lien présent sur le bouton de suppression
    	document.getElementById(idSupprButton).onclick = "supprime_champ('"+idDiv+"',"+newID+",'"+champNom+"',"+champSize+","+champMaxlength+","+nomForm+","+idSupprButton+");";
    }
    Voilou si vous avez une idée sur le problème, je suis toute ouïe !

  2. #2
    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 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    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 640
    Points : 66 665
    Points
    66 665
    Billets dans le blog
    1
    Par défaut
    Merci d'aller voir dasn la FAQ ou les contributions.

    Le poste sur FORM Dymanique peut te donner des idées ...

  3. #3
    Candidat au Club
    Inscrit en
    Janvier 2008
    Messages
    3
    Détails du profil
    Informations forums :
    Inscription : Janvier 2008
    Messages : 3
    Points : 2
    Points
    2
    Par défaut
    Merci, mais c'est ou tout ca ? rien trouvé dans le champ de rechercher de la FAQ.

  4. #4
    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 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    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 640
    Points : 66 665
    Points
    66 665
    Billets dans le blog
    1

  5. #5
    Candidat au Club
    Inscrit en
    Janvier 2008
    Messages
    3
    Détails du profil
    Informations forums :
    Inscription : Janvier 2008
    Messages : 3
    Points : 2
    Points
    2
    Par défaut
    Je viens de trouver :/ un attribut xxx.onClick, fallait le C majuscule apparement, enfin c'est bizarre, a force de bidouillages...

    Merci quand même je passe le sujet en résolu !

  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 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    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 640
    Points : 66 665
    Points
    66 665
    Billets dans le blog
    1
    Par défaut
    heu non la majuscule importe peu,

    c'est surtout qu'il faut affecter une fonction à un onclick


    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    xxx.onclick=function(){alert('coucou')};

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

Discussions similaires

  1. Creer et supprimer des cercles dynamiquement dans google maps
    Par Sofute dans le forum API standards et tierces
    Réponses: 2
    Dernier message: 12/02/2014, 10h22
  2. Réponses: 6
    Dernier message: 01/06/2006, 15h11
  3. [PHP-JS] Trier des champs dynamiques
    Par Mehdi Feki dans le forum Langage
    Réponses: 8
    Dernier message: 22/12/2005, 23h39
  4. Réponses: 5
    Dernier message: 06/07/2005, 21h14

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