Besoin d'aide pour formulaire dynamique

Bonjour,

Assez peu expérimenté en js, encore moins en jQuery, j'essaie en vain depuis quelques jours d'arriver à mes fins : il s'agit de faire un form dynamique dont un select affiché changerait en fonction de la valeur d'un bouton radio :

Le bouton radio :

Code:

---

1 2 3 4 5 6

<div class="field"> <label for="f_transfert">Transfert du défunt... : </label> <input name="f_transfert" type="radio" value="vers ossuaire" id="vossuaire">Vers ossuaire&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input name="f_transfert" type="radio" value="vers jardin du souvenir" id="vjardin">Vers jardin du souvenir&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input name="f_transfert" type="radio" value="vers colombarium" id="vcolumbarium">Vers colombarium </div>

---

A noter que ma page est une jsp avec du jstl dedans, ce dernier permet de créer le html du select à afficher. Pour le moment - et c'est le cadet de mes soucis - les 3 listes sont fabriquées en même temps que la page (pour ne pas refaire des appels au serveur : pas d'ajax dans mon appli).

L'idée est d'aller mettre dans une balise (id='transfertvers') le code html correspondant, soit au moyen de .Add, soit au moyen de .html :

Code:

---

1 2 3 4 5 6

<div class="field"> <div>TEST JQUERY</div> <div id="transfertvers"> <!-- insertion dynamique jQuery --> </div> </div>

---

Pour le moment, j'arrive à récupérer la valeur de mon radio avec

Code:

---

1 2 3 4

jQuery('[name=f_transfert]').click(function(event){ alert(jQuery('[name=f_transfert]:checked').val()); });

---

Mais je devrai passer par ce genre de fonction pour aller au final mettre le html de la liste voulue dans le document :

Code:

---

1 2 3 4 5 6 7 8 9 10

switch(jQuery('[name=f_transfert]:checked').val()){ case "vers ossuaire" : return ${htmloss} ; break; case "vers jardin du souvenir" : return ${htmljds} ; break; case "vers colombarium" : return ${htmlcol} ; }

---

...Et là je suis un peu perdu car je ne sais plus où mettre quoi !

J'ai ma jsp qui inclue du js et notamment le

Code:

---

jQuery(document).ready(function() {

---

J'ai aussi une feuille js avec des fonctions - notamment certaines appelées par la même page, donc je me verrai bien mettre le traitement à la suite.

Bref, suis un peu perdu, je vous remercie d'avance pour votre aide !

B.

pour modifier l'intérieur d'une balise, il y a la fonction jQuery "html"

essaye ce code par exemple :

Code:

---

$("#transfertvers").html($("#htmloss"));

---

regarde cette page pour d'autres fonctions de modification :
http://api.jquery.com/category/manip...ertion-inside/

Merci pour la réponse...
J'ai un peu avancé :
Mon code est désormais (j'ai mis les variables jstl dans des var js, c'est plus clair pour la suite :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

jQuery('[name=f_transfert]').click(function(event) { var oss = '<c:out value="${htmloss}"/>'; var jds = '<c:out value="${htmljds}"/>'; var col = '<c:out value="${htmlcol}"/>'; switch (this.value) { case "vers ossuaire" : jQuery("#transfertvers").html(oss); break; case "vers jardin du souvenir" : jQuery("#transfertvers").html(jds); break; case "vers colombarium" : jQuery("#transfertvers").html(col); break; } });

---

Le seul souci, c'est qu'au lieu de me mettre le contrôle dans la page, il me met le html en dur :

Code:

---

<div id='prectransf'><label for='f_ossuaire_id'>Ossuaire : </label><select name='f_ossuaire_id'><option value='67017311'>67017311</option><option value='67017312'>67017312</option></select></div>

---

EDIT : Ok, c'est résolu : le passage de la variable jstl vers js ne doit pas échapper au html :
Donc : fonction unescape donnée sur un autre forum :

Code:

---

1 2 3 4 5

function unescapeHTML(htmlstring) { var elem = document.createElement("div"); elem.innerHTML = htmlstring; return elem.childNodes.length === 0 ? "" : elem.childNodes[0].nodeValue; }

---

Et affectation à la variable js de cette manière

Code:

---

var oss = unescapeHTML('<c:out value="${htmloss}"/>');

---