High-Tech Santé Médecine Droit-Finances

Grippe A

Que dois-je faire ?

Rechercher : dans
Par :

Javascript + formulaire select - A l'AIDE !

Dernière réponse le 13 jun 2008 à 10:14:16 Edouard73, le 6 mai 2008 à 23:46:03 
 Signaler ce message aux modérateurs

Bonjour,

voila je reste bloqué sur le java script suivant qui concerne un formulaire select.

voici les codes :

<script language="JavaScript">
function verif()
{
if (document.layers)
{
formulaire = document.forms.forumlaire;
}
else
{
formulaire = document.forumlaire;
}
}

function verifClasse()
{
verif();
if (formulaire.classe.value == "0")
{
alert('Vous devez tout d\'abord choisir une classe!');
formulaire.classe.focus();
}
}

var images = new Array();
images[0] = new Array();
images[1] = new Array("images/gardien.png")
images[2] = new Array("images/conquerant.png")
images[3] = new Array("images/templier.png")
images[4] = new Array("images/barbare.png")
images[5] = new Array("images/eclaireur.png")
images[6] = new Array("images/assassin.png")
images[7] = new Array("images/pretre-de-mitra.png")
images[8] = new Array("images/fleau.png")
images[9] = new Array("images/chaman.png")
images[10] = new Array("images/demonologue.png")
images[11] = new Array("images/necromancien.png")
images[12] = new Array("images/heraut.png")

function remplirAvatar(code)
{
verif();
var lesImages = images[code];

if (code>0)
{
formulaire.avatar.options.length = lesImages.length;
for (i=0; i<lesImages.length; i++)
{
formulaire.avatar.options[i].id = lesImages[i];
formulaire.avatar.options[i].text = lesImages[i];
}
document.monFormulaire.avatar.options.selectedIndex = 0;
}
else
{
formulaire.avatar.options.length = 1;
formulaire.avatar.options[0].id = 0;
formulaire.avatar.options[0].text = "-- choisissez dabors une classe";
}
}
</script>
<script language="JavaScript">
function verif()
{
if (document.layers)
{
formulaire = document.forms.forumlaire;
}
else
{
formulaire = document.forumlaire;
}
}

function verifClasse()
{
verif();
if (formulaire.classe.value == "0")
{
alert('Vous devez tout d\'abord choisir une classe!');
formulaire.classe.focus();
}
}
var cimm = new Array();
cimm[0] = new Array();
cimm[1] = new Array("Soldat")
cimm[2] = new Array("Soldat")
cimm[3] = new Array("Soldat")
cimm[4] = new Array("Maraudeur")
cimm[5] = new Array("Maraudeur")
cimm[6] = new Array("Maraudeur")
cimm[7] = new Array("Pretre")
cimm[8] = new Array("Pretre")
cimm[9] = new Array("Pretre")
cimm[10] = new Array("Mage")
cimm[11] = new Array("Mage")
cimm[12] = new Array("Mage")

function remplirArchetype(code)
{
verif();
var lesCimms = cimm[code];

if (code>0)
{
formulaire.archetype.options.length = lesCimms.length;
for (i=0; i<lesCimms.length; i++)
{
formulaire.archetype.options[i].id = lesCimms[i];
formulaire.archetype.options[i].text = lesCimms[i];
}
document.monFormulaire.archetype.options.selectedIndex = 0;
}
else
{
formulaire.archetype.options.length = 1;
formulaire.archetype.options[0].id = 0;
formulaire.archetype.options[0].text = "-- choisissez dabors une classe";
}
}
</script>

<form name="forumlaire" method="post" action="nouvelle-view.php" enctype="multipart/form-data">
<br />Classe
<select name="classe"
onChange="remplirAvatar(this.options[this.selectedIndex].id); remplirArchetype(this.options[this.selectedIndex].id;">
<option id="0" selected="selected">-- choisissez une classe</option>
<option id="1" value="Gardien">Gardien</option>
<option id="2" value="Conquerant">Conquerant</option>
<option id="3" value="Templier_noir">Templier_noir</option>
<option id="4" value="Barbare">Barbare</option>
<option id="5" value="Eclaireur">Eclaireur</option>
<option id="6" value="Assassin">Assassin</option>
<option id="7" value="Pretre_de_Mitra">Pretre_de_Mitra</option>
<option id="8" value="Fleau_de_Set">Fleau_de_Set</option>
<option id="9" value="Chaman_Ours">Chaman_Ours</option>
<option id="10" value="Demonologue">Demonologue</option>
<option id="11" value="Necromancien">Necromancien</option>
<option id="12" value="Heraut_de_Xolti">Heraut_de_Xolti</option>
</select>

<br />Avatar
<select name="avatar" onFocus="verifClasse();">
<option selected="selected">-- choisissez dabors une classe</option>
</select>

<br />Archetype
<select name="archetype" onFocus="verifClasse();">
<option selected="selected">-- choisissez dabors une classe</option>
</select>
</form>

Mon soucie réside dans le selected Arechetype.

En faite lorsque l'utilisateur selectionne Gardien par exemple, le selected avatar choisi l'image gardien.png j'aimerai aussi qu'il choissie dans le selected archetype l'option Soldat.

Je bloc sur ça. j'arrive super bien à faire avec 2 variables. Mais la y'en a 3 et je ne trouve pas de tutos sur le web qui fais si complexe.

je pense que le soucise vient d'ici : <select name="classe"
onChange="remplirAvatar(this.options[this.selectedIndex].id); remplirArchetype(this.options[this.selectedIndex].id;">

car je les ai testé tout les deux indépendamment, et ils fonctionnent super bien. mais je ne vois pas comment faire d'autre pour que une selection entraine la seconde puis las troisièmement.

merciiiii de tout coeur d'avance pour votre aide :))))

Configuration: Windows XP
Firefox 2.0.0.14

Meilleures réponses pour « javascript + formulaire select A l'AIDE ! » dans :
Javascript - Les événements VoirQu'appelle-t-on un événement? Les événements sont des actions de l'utilisateur, qui vont pouvoir donner lieu à une interactivité. L'événement par excellence est le clic de souris, car c'est le seul que le HTML gère. Grâce au Javascript il est...
Javascript - La notion d'objet VoirNotion d'objet Le but de cette section n'a pas pour ambition de traîter de la programmation orientée objet mais de donner une idée de ce qu'est un objet, concept nécessaire à la création de scripts Javascript. Le Javascript traite les éléments qui...
Posez votre question Répondre

1

PhP, le 7 mai 2008 à 09:08:18

Bjr

Déjà il manque une parenthèse fermante à la fin de la fonction remplirArchetype : faute de frappe ?

onChange="remplirAvatar(this.options[this.selectedIndex].id); remplirArchetype(this.options[this.selectedIndex].id);">

Ensuite tes fonctions verifClasse() et verif() sont en double ! supprimes en une version !


Enfin remplace 

document.monFormulaire.archetype.options.selectedIndex = 0;


par 
formulaire.archetype.options.selectedIndex = 0;



Et 
document.monFormulaire.avatar.options.selectedIndex = 0;


par 
formulaire.avatar.options.selectedIndex = 0;


Et ca devrait mieux fonctionner

PhP  
Il y a 10 types de personnes dans le monde : ceux qui comprennent le binaire et les autres ...

   
Répondre à PhP

2

Edouard73, le 7 mai 2008 à 09:32:08

Coucou.

merci pour ta réponse. en faite ce sont des lignes qui sont passé à la trappe. mais mon soucie n'est pas reglé pour autant.

Lorsque je selectionne gardien, le selected avatar selectionne l'image concerné mais n'affiche pas pour autant dans archetype soldat :(

   
Répondre à Edouard73

3

PhP, le 7 mai 2008 à 10:03:25

Ce code fonctionne 

<html>
<head>

<script language="JavaScript"> 
function verif() 
{ 
if (document.layers) 
{ 
formulaire = document.forms.forumlaire; 
} 
else 
{ 
formulaire = document.forumlaire; 
} 
} 

function verifClasse() 
{ 
verif(); 
if (formulaire.classe.value == "0") 
{ 
alert('Vous devez tout d\'abord choisir une classe!'); 
formulaire.classe.focus(); 
} 
} 

var images = new Array(); 
images[0] = new Array(); 
images[1] = new Array("images/gardien.png") 
images[2] = new Array("images/conquerant.png") 
images[3] = new Array("images/templier.png") 
images[4] = new Array("images/barbare.png") 
images[5] = new Array("images/eclaireur.png") 
images[6] = new Array("images/assassin.png") 
images[7] = new Array("images/pretre-de-mitra.png") 
images[8] = new Array("images/fleau.png") 
images[9] = new Array("images/chaman.png") 
images[10] = new Array("images/demonologue.png") 
images[11] = new Array("images/necromancien.png") 
images[12] = new Array("images/heraut.png") 

function remplirAvatar(code) 
{ 

verif(); 
var lesImages = images[code]; 

if (code>0) 
{ 
formulaire.avatar.options.length = lesImages.length; 
for (i=0; i<lesImages.length; i++) 
{ 
formulaire.avatar.options[i].id = lesImages[i]; 
formulaire.avatar.options[i].text = lesImages[i]; 
} 
//document.monFormulaire.avatar.options.selectedIndex = 0; 
formulaire.avatar.options.selectedIndex = 0; 
} 
else 
{ 
formulaire.avatar.options.length = 1; 
formulaire.avatar.options[0].id = 0; 
formulaire.avatar.options[0].text = "-- choisissez dabors une classe"; 
} 

} 

var cimm = new Array(); 
cimm[0] = new Array(); 
cimm[1] = new Array("Soldat") 
cimm[2] = new Array("Soldat") 
cimm[3] = new Array("Soldat") 
cimm[4] = new Array("Maraudeur") 
cimm[5] = new Array("Maraudeur") 
cimm[6] = new Array("Maraudeur") 
cimm[7] = new Array("Pretre") 
cimm[8] = new Array("Pretre") 
cimm[9] = new Array("Pretre") 
cimm[10] = new Array("Mage") 
cimm[11] = new Array("Mage") 
cimm[12] = new Array("Mage") 

function remplirArchetype(code) 
{ 

verif(); 
var lesCimms = cimm[code]; 

if (code>0) 
{ 
formulaire.archetype.options.length = lesCimms.length; 
for (i=0; i<lesCimms.length; i++) 
{ 
formulaire.archetype.options[i].id = lesCimms[i]; 
formulaire.archetype.options[i].text = lesCimms[i]; 
} 
//document.monFormulaire.archetype.options.selectedIndex = 0; 
formulaire.archetype.options.selectedIndex = 0; 
} 
else 
{ 
formulaire.archetype.options.length = 1; 
formulaire.archetype.options[0].id = 0; 
formulaire.archetype.options[0].text = "-- choisissez dabors une classe"; 
} 
} 
</script> 



</head>
<body >

<form name="forumlaire" method="post" action="nouvelle-view.php" enctype="multipart/form-data"> 
<br />Classe 
<select name="classe" 
onChange="remplirAvatar(this.options[this.selectedIndex].id); remplirArchetype(this.options[this.selectedIndex].id);"> 
<option id="0" selected="selected">-- choisissez une classe</option> 
<option id="1" value="Gardien">Gardien</option> 
<option id="2" value="Conquerant">Conquerant</option> 
<option id="3" value="Templier_noir">Templier_noir</option> 
<option id="4" value="Barbare">Barbare</option> 
<option id="5" value="Eclaireur">Eclaireur</option> 
<option id="6" value="Assassin">Assassin</option> 
<option id="7" value="Pretre_de_Mitra">Pretre_de_Mitra</option> 
<option id="8" value="Fleau_de_Set">Fleau_de_Set</option> 
<option id="9" value="Chaman_Ours">Chaman_Ours</option> 
<option id="10" value="Demonologue">Demonologue</option> 
<option id="11" value="Necromancien">Necromancien</option> 
<option id="12" value="Heraut_de_Xolti">Heraut_de_Xolti</option> 
</select> 

<br />Avatar 
<select name="avatar" onFocus="verifClasse();"> 
<option selected="selected">-- choisissez dabors une classe</option> 
</select> 

<br />Archetype 
<select name="archetype" onFocus="verifClasse();"> 
<option selected="selected">-- choisissez dabors une classe</option> 
</select> 
</form> 


</body>
</html>
--

PhP  
Il y a 10 types de personnes dans le monde : ceux qui comprennent le binaire et les autres ...

   
Répondre à PhP

4

Edouard73, le 7 mai 2008 à 10:31:25

Super ça.

en faite le probleme ne résidait pas dans

onChange="remplirAvatar(this.options[this.selectedIndex].id); remplirArchetype(this.options[this.selectedIndex].id);">

mais dans le code java script. je ne devais pas repeter le script et donc enlever cette partie :

}
</script>
<script language="JavaScript">
function verif()
{
if (document.layers)
{
formulaire = document.forms.forumlaire;
}
else
{
formulaire = document.forumlaire;
}
}

function verifClasse()
{
verif();
if (formulaire.classe.value == "0")
{
alert('Vous devez tout d\'abord choisir une classe!');
formulaire.classe.focus();
}

et remplacer mes erreurs :

document.monFormulaire.avatar.options.selectedIndex = 0; par formulaire.avatar.options.selectedIndex = 0;

et

document.monFormulaire.archetype.options.selectedIndex = 0; par formulaire.archetype.options.selectedIndex = 0;

super. merci pour ton aide. ça ouvre maintenant la possibilité à répéter l'opération indéfiniment.

   
Répondre à Edouard73

5

 djoyanna, le 13 jun 2008 à 10:14:16

Bonjour
je m'adresse a vous car je nai pas encore obtenu de solution

me voici avec un souci :( dans un formulaire de question reponse dynamique dans l'affichage de chaque liste de reponse il y a une option autre qui permet d'afficher un champs text au cas ou les reponses ne conviennent pas a lutilisateur. j'appelle dans ma bdd les question de la table question puis les reponses dans la table reponse qui ont en commun l'id question. le nombre de question n'est donc pas fixeµ.
Dans chaque question il y a une zone 'autre' individuelle .
la fonction js qui sui me permet de rendre visible ou non le champs text quan l'utilisateur clik sur autre.
voici ma fonction :

function RendVisibleAutre(texte)
{

if (texte=="autre")
document.getElementById("autre_reponse").style.visibility= 'visible';
else
document.getElementById("autre_reponse").style.visibility= 'hidden';
}
</script>

voici son utilisation :

<?php
$i=0;
$i=i++;
echo "<SELECT size=1 onchange='RendVisibleAutre(this.value,autre_reponse".$i.")'
name='reponse".$nbQuestion."'> ";
foreach ($lResult4 as $row4)
{
//affichage des reponse possible dasn option
$reponse=$row4['id_reponse'];
echo "\n".'<option value='.$row4['id_reponse'].'>';
echo $row4['intitule_reponse'];
//echo $reponse;
echo '</option>';

}
echo "<option value='autre'>autre</option></SELECT>";
?>
<p><div id='autre_reponse"<?echo $i?>"' style="visibility:hidden;position:absolute;">
<input type="text" name='autre'></div>
</p>

ca ne fonctionne pas :(
cela vien peut etre du fait que je ne passe pas la variable $i dans la fonction js?
ou alors j'ai mal formuler ma fonction???
je ne voi pas... svpp ... help ...

   
Répondre à djoyanna
Posez votre question Répondre
Ils ont besoin de votre aide