Voir le sujet - mise à jour de champs d'un formulaire >> Aide à la conception de sites internet

Posté le: Jeu 13 Mai 2004, 5:30 pm

Je réalise un site intranet en HTML et JSP. Dans celui ci j'ai une liste de choix. Après avoir choisi une valeur de cette liste de choix je souhaite que d'autre champs soit mis à jour automatiquement.

Comment cela est ce réalisable? Je sais que c'est possible car certains sites le font.

Merci de votre aide

Posté le: Jeu 13 Mai 2004, 6:46 pm

Bonjour,

Si j'ai bien compris vous voulez réalisé par exemple deux menus déroulants, ou un menu et un champ qui puissent communiquer ensemble lorsqu'un choix a été fait dans un menu déroulant...

Donc voici un script (fontcionnant sur ce principe la) qui permet d'afficher un menu dynamique à base de liste déroulante dont la sélection des thèmes de celui-ci permettra de générer un second menu en fonction du choix fait au premier...

Code:

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">

//Script trouvé sur Script-Masters.com

menu=new Array()

// Rajoutez un élément au tableau menu pour chaque categorie supplémentaire
// De la même façon, pensez à modifier le formulaire pour rajouter des categories.
menu[0]=new Array()
menu[1]=new Array()
menu[2]=new Array()

// Modifiez ici les variables pour les menus deroulant
// la première valeur est le titre, la seconde l'url
// metter l'url à "null" si vous ne souhaitez pas une redirection pour ce titre

menu[0][0]=new Option("Sous Theme - Internet","null")
menu[0][1]=new Option("Actualite","http://www.script-masters.com/")
menu[0][2]=new Option("Ressources Webmaster","http://www.script-masters.com/")

menu[1][0]=new Option("Sous Theme - Informatique","null")
menu[1][1]=new Option("Programmation","http://www.script-masters.com/")
menu[1][2]=new Option("Materiel","http://www.script-masters.com/")

menu[2][0]=new Option("Sous Theme - Actualité","null")
menu[2][1]=new Option("France","http://www.script-masters.com/")
menu[2][2]=new Option("Monde","http://www.script-masters.com/")

// Ne rien modifié sous cette ligne
function changeSousTheme(numeroMenu){
for (i=document.menuDeroulant.sousTheme.options.length-1;i>0;i--){
document.menuDeroulant.sousTheme.options[i]=null
}

for (i=0;i<menu[numeroMenu].length;i++){
document.menuDeroulant.sousTheme.options[i]=new Option(menu[numeroMenu][i].text,menu[numeroMenu][i].value)
}

document.menuDeroulant.sousTheme.selectedIndex=0
}

function selectmenu(theme_prin){
if (theme_prin.theme.options[theme_prin.theme.selectedIndex].value == "null"){
alert('selectionnez d'abord un theme');
}
else{
window.top.location.href = theme_prin.theme.options[theme_prin.theme.selectedIndex].value;
}
}

function destination(){
var destination = document.menuDeroulant.sousTheme.options[document.menuDeroulant.sousTheme.selectedIndex].value;

if(destination=="null"){
alert('Veuillez saisir une destination valide!');
}
else{
window.top.location.href = destination;
}
}

</SCRIPT>
</head>
<body>
<FORM NAME="menuDeroulant">
<div align="center">

<SELECT NAME="theme" SIZE=1 onChange="selectmenu(this.form)">
<OPTION selected VALUE="null">-=Theme Principal=-
<OPTION VALUE="Javascript:changeSousTheme(0)">Internet
<OPTION VALUE="Javascript:changeSousTheme(1)">Informatique
<OPTION VALUE="Javascript:changeSousTheme(2)">Actualité
</SELECT>

<SELECT NAME="sousTheme" style="width:225">
<OPTION VALUE="null">Selectionner D'abord Un Theme
</SELECT>

<INPUT TYPE=button onclick="destination()" VALUE="Valider">
</div>
</FORM>
</body>
</html>

En espérant que cela conviendra à ce que vous recherchez... Bon courage

Bye

Posté le: Lun 24 Mai 2004, 4:40 pm

ca répond bien à ce que je veux faire mais ton exemple ne fonctionne pas et je ne vois pas d'ou vient l'erreur

Posté le: Lun 24 Mai 2004, 5:59 pm

Essayez plutôt ça:

Code:

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">

//Script trouvé sur Script-Masters.com

menu=new Array()

// Rajoutez un élément au tableau menu pour chaque categorie supplémentaire
// De la même façon, pensez à modifier le formulaire pour rajouter des categories.
menu[0]=new Array()
menu[1]=new Array()
menu[2]=new Array()

// Modifiez ici les variables pour les menus deroulant
// la première valeur est le titre, la seconde l'url
// metter l'url à "null" si vous ne souhaitez pas une redirection pour ce titre

menu[0][0]=new Option("Sous Theme - Internet","null")
menu[0][1]=new Option("Actualite","http://www.script-masters.com/")
menu[0][2]=new Option("Ressources Webmaster","http://www.script-masters.com/")

menu[1][0]=new Option("Sous Theme - Informatique","null")
menu[1][1]=new Option("Programmation","http://www.script-masters.com/")
menu[1][2]=new Option("Materiel","http://www.script-masters.com/")

menu[2][0]=new Option("Sous Theme - Actualité","null")
menu[2][1]=new Option("France","http://www.script-masters.com/")
menu[2][2]=new Option("Monde","http://www.script-masters.com/")

// Ne rien modifié sous cette ligne
function changeSousTheme(numeroMenu){
for (i=document.menuDeroulant.sousTheme.options.length-1;i>0;i--){
document.menuDeroulant.sousTheme.options[i]=null
}

for (i=0;i<menu[numeroMenu].length;i++){
document.menuDeroulant.sousTheme.options[i]=new Option(menu[numeroMenu][i].text,menu[numeroMenu][i].value)
}

document.menuDeroulant.sousTheme.selectedIndex=0
}

function selectmenu(theme_prin){
if (theme_prin.theme.options[theme_prin.theme.selectedIndex].value == "null"){
alert('selectionnez d'abord un theme');
}
else{
window.top.location.href = theme_prin.theme.options[theme_prin.theme.selectedIndex].value;
}
}

function destination(){
var destination = document.menuDeroulant.sousTheme.options[document.menuDeroulant.sousTheme.selectedIndex].value;

if(destination=="null"){
alert('Veuillez saisir une destination valide!');
}
else{
window.top.location.href = destination;
}
}

</SCRIPT>
</head>
<body>
<FORM NAME="menuDeroulant">
<div align="center">

<SELECT NAME="theme" SIZE=1 onChange="selectmenu(this.form)">
<OPTION selected VALUE="null">-=Theme Principal=-
<OPTION VALUE="Javascript:changeSousTheme(0)">Internet
<OPTION VALUE="Javascript:changeSousTheme(1)">Informatique
<OPTION VALUE="Javascript:changeSousTheme(2)">Actualité
</SELECT>

<SELECT NAME="sousTheme" style="width:225">
<OPTION VALUE="null">Selectionner D'abord Un Theme
</SELECT>

<INPUT TYPE=button onclick="destination()" VALUE="Valider">
</div>
</FORM>
</body>
</html>

Posté le: Mar 25 Mai 2004, 9:04 am

Je ne sais pas si ca vient de moi mais quand je choisis un thème dans la première liste, la deuxième ne se met pas à jour automatiquement alors que ca devrait etre le cas

Posté le: Mar 25 Mai 2004, 6:52 pm

Pourtant pour moi ça marche très bien, regardez ici et dites moi si ça ne marche pas non plus ? Et si ça marche vous n'avez qu'à prendre le code source de la page mais normalement c'est le même que je vous ai donné dans mon précédent post !

_________________
W€bM@sT€r D'€@SyScr!pT
contact@easy-script.com
http://www.easy-script.com

[ Ce Message a été édité par: webmaster le 2004-05-25 18:54 ]