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