Changer un input text par une listbox (dynamiquement)

**SPACHFR** · 07/05/2009, 15h44

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

**franculo_caoulene** · 07/05/2009, 15h52

Salut,

Tu as Node.replaceChild() pour remplacer dans le div.

**SPACHFR** · 07/05/2009, 16h11

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.

**franculo_caoulene** · 07/05/2009, 16h13

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.

**SPACHFR** · 07/05/2009, 16h30

En fait voici un exemple

Le div avant une action

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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....

**franculo_caoulene** · 07/05/2009, 17h02

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 xhtml :

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
<!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>

**SPACHFR** · 07/05/2009, 17h19

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....

Merci

**SpaceFrog** · 07/05/2009, 17h22

le plus simple et le plus sur est encore d'avoir les deux sur la page et de basculer leur display ...

**franculo_caoulene** · 07/05/2009, 17h24

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�.

**SPACHFR** · 07/05/2009, 17h52

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.

**SPACHFR** · 07/05/2009, 18h16

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

Changer un input text par une listbox (dynamiquement)

JavaScript

Discussions similaires

Partager

Partager