Changer un input text par une listbox (dynamiquement)

Version imprimable

07/05/2009, 15h44
SPACHFR

Changer un input text par une listbox (dynamiquement)

Bonjour,

J'ai un DIV contenant plusieurs éléments.L'un de ces éléments est un "input" de type text.
En fonction du choix utilisateur souhaiterai changer cet input par une listbox (et inversement) sans avoir à mettre à jour l'ensemble du contenu du DIV.

Existe t' il une méthode pour réaliser cette action, ou dois je réécrire entièrement le contenu du DIV ?
(le div n'est pas créé via du DOM)

Merci
07/05/2009, 15h52
franculo_caoulene

Salut,

Tu as Node.replaceChild() pour remplacer dans le div.
07/05/2009, 16h11
SPACHFR

Merci pour cette réponse.

Cette méthode fonctionne t'elle même si le DIV n'a pas été créé via du DOM ?

Car via JavaScript je parviens bien à modifier la valeur de l'INPUT TEXT et à manipuler cet "objet" (le terme est peut être impropre) mais pas à le modifier en listBox.
07/05/2009, 16h13
franculo_caoulene

Citation:

Envoyé par SPACHFR

Cette méthode fonctionne t'elle même si le DIV n'a pas été créé via du DOM ?

Que veux-tu dire par là?

[edit] un code vaut mieux que deux "tu l'auras". peux-tu poster un code illustrant ce problème. Pas le code original, je dis bien un code minimaliste illustrant le problème.
07/05/2009, 16h30
SPACHFR
En fait voici un exemple

Le div avant une action
Code:

1 2 3 4 5 <div id="conteneur"> <input type="button" id="bt1" onclick="changediv()"> <input type="text" id="Nom" value=""> </div>
sur appel de changediv(), je souhaiterai avoir le contenu suivant dans le div "conteneur" (sans avoir à réécrire l'ensemble du div)
Code:

1 2 3 4 5 6 7 <div id="conteneur"> <input type="button" id="bt1" onclick="changediv()"> <select id="slt1"> <option value="opt1">option1</option> </select> </div>
L'input text devient une listBox
Je ne sais pas si cela est réalisable....

Des résultats existent en faisant une recherche, donc un de mes propres messages datant de quatre ans environ.

De plus SpaceFrog à développé tout un truc à ce sujet.

Je poste tout de même un code un code simple fonctionnant sous FF3, IE7, Opera9.6 et Safari3

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
    <title>remplacer un élément</title>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <style type="text/css"></style>
</head>
<body>
  <button id="select" type="button" value="select">select</button>
  <button id="input" type="button" value="input">input</button>
  <form id="f" name="f" method="post">
  <div id="c">
    <input id="i" name="i" type="text" />
  </div>
  </form>
    <script type="text/javascript">
    var Utils = {
      toSelect : function(p, e) {
        var s = document.createElement("select");
        var o = document.createElement("option");
        var o1 = document.createTextNode("o1");
        s.id = "s";
        s.name = "s";
        o.value = "o1";
        o.appendChild(o1);
        s.appendChild(o);
        p.replaceChild(s, e);
      },
      toInput : function(p, e) {
        var i = document.createElement("input");
        i.id = "i";
        i.name = "i";
        i.type = "text";
        p.replaceChild(i, e);
      }
    };
    
    document.getElementById("select").onclick = function() {
      if (document.getElementById("i"))
        Utils.toSelect(document.getElementById("c"), document.getElementById("i"));
    }
    document.getElementById("input").onclick = function() {
      if (document.getElementById("s"))
        Utils.toInput(document.getElementById("c"), document.getElementById("s"));
    }
    </script>
</body>
</html>

07/05/2009, 17h19
SPACHFR

Merci pour cette réponse et ce bout de code.

Je viens de tester , c'est bien dans l'esprit de ce que je recherche à réaliser.
Je vais essayer de comprendre comment ça fonctionne car je débute en javascript afin d'essayer de l'implémenter.

ps: j'ai jamais vue de variable comme Utils (??)

Bon je creuse....:koi:

Merci
07/05/2009, 17h22
SpaceFrog

le plus simple et le plus sur est encore d'avoir les deux sur la page et de basculer leur display ...
07/05/2009, 17h24
franculo_caoulene

Utils est une variable comme une autre que j'aurais pu nommé xyz ou quoique ce soit d'autre. Tu peux la renommer comme tu le souhaites.

On l'utilise comme espace de nom, ça permet d'organiser son code on va dire, pour plus de lisibilité.
07/05/2009, 17h52
SPACHFR

C'est pas le nom de la variable qui est déroutant, c'est surtout son contenu.
Je ne pensais pas que l'on pouvais faire ce type de déclaration.

La remarque de SpaceFrog est intérressante, j'utilise cette méthode lorsqu' un l'élément est/ou n'est plus nécessaire.
je la conserve en plan B.....

Mais dans ce cas précis je préfère modifier le type d'élément tout en gardant le même id.
Mon div principal contient n div créés dynamiquement contenant des éléments qui peuvent changer (input, listbox,etc..) en fonction du choix dans une listeBox, voir de la listBox qui aura remplacé l'input.
Bref je voudrai éviter de multiplier les id , car ensuite je récupère le tout pour l'envoyer via XMLHttpRequest.

En tout cas MERCI pour vos réponses et remarques pertinentes.
07/05/2009, 18h16
SPACHFR

Je met le tag "résolu" car j'ai la réponse à ma question.
J'ai testé le bout de code, je vois comment ça fonctionne. En plus c'est un petit pas dans DOM (si j'ai bien compris).
Reste à implémenter une solution similaire dans mon code

Merci à vous deux

:merci: