[Résolu] Changement des valeurs d'un hidden input - Le changement ne se fait pas par AntoLeNice - page 1

Bonjour à tous.

J'ai un formulaire dans lequel j'ai un avatar modifiable et un champs "select" qui permet de choisir le pays que l'on veut et, qu'au changement de pays, le champs "hidden" type_bestiole change. Pour chaque partie de l'avatar, la fonction doit modifier la valeur d'un champs "hidden" pour pouvoir faire l'entrée dans une base de données. Or, les changement le se font pas, puisque dans la base de données, j'ai, pour l'avatar, les valeurs par défauts du formulaire, que type_animal vaut 0 au lieu de "renard" et que color_bestiole vaut = au lieu de "beige".

Dans mon formulaire, j'ai ce code:

<select name="pays" onchange="bestiole_type(this.value, document.inscription.color_bestiole.value);">
<option value="none"> </option>
<option value="Nokotera">Nokotera</option>
<option value="Sileronis">Sileronis</option>
<option value="Etakinn">Etakinn</option>
<option value="Oranajisaq">Oranajisaq</option>
</select>

<center><div class="avatar">
<img src="images/avatar/skin/skin1.png" class="skin" id="skin" />
<img src="images/avatar/hair/hairstyle1_brown.png" class="hair" id="hair" />
<img src="images/avatar/eyes/eyes1.png" class="eyes" id="eyes" />
<img src="images/avatar/nose/nose1.png" class="nose" id="nose" />
<img src="images/avatar/mouth/mouth1.png" class="mouth" id="mouth" />
<img src="images/avatar/clothes/clothes_default.png" class="clothes" id="clothes" />
</div></center><br />
		
		
		
<div onclick="image_out('skin');" class="image_out_link">Couleur de la peau</div>
<div class="image_av" id="skin_av"></div><br />
		
<div onclick="image_out('hair');" class="image_out_link">Cheveux</div>
<div class="image_av" id="hair_av"></div><br />
		
<div onclick="image_out('eyes');" class="image_out_link">Yeux</div>
<div class="image_av" id="eyes_av"></div><br />
		
<div onclick="image_out('nose');" class="image_out_link">Nez</div>
<div class="image_av" id="nose_av"></div><br />
		
<div onclick="image_out('mouth');" class="image_out_link">Bouche</div>
<div class="image_av" id="mouth_av"></div><br />
		
<div onclick="image_out('clothes');" class="image_out_link">Vêtements</div>
<div class="image_av" id="clothes_av"></div><br />

<div id="bestiole_type">Vous ne venez d'aucun pays, vous n'avez donc pas de bestiole.</div>
<img src="images/bestioles/no_bestiole.png" id="bestiole_img" /><br />
Nom de votre bestiole: <input type="text" name="nom_bestiole" /><br />
Couleur de votre bestiole: 
<select name="color_bestiole" onchange="bestiole_type(document.inscription.pays.value, this.value);">
<option value="brunfonce">Brun Foncé</option>
<option value="brunpale">Brun Pâle</option>
<option value="gris">Gris</option>
<option value="beige">Beige</option>
</select>			

<input type="hidden" id="type_animal" name="type_animal" value="" />
<input type="hidden" id="color_animal" name="color_animal" value="brunfonce" />
<input type="hidden" name="skin" value="skin1" />
<input type="hidden" name="hair" value="hairstyle1_brown" />
<input type="hidden" name="eyes" value="eyes1" />
<input type="hidden" name="nose" value="nose1" />
<input type="hidden" name="mouth" value="mouth1" />
<input type="hidden" name="clothes" value="clothes_default" />
<input type="submit" name="submit" value="S'inscrire à Way of Evolution" />

J'ai ensuite des fonctions en Javascript:

Pour la bestiole:

function bestiole_type(pays, couleur) {
	switch(pays)
	{
		case "none":
			document.getElementById('bestiole_type').innerHTML = "Vous ne venez d'aucun pays, vous n'avez donc pas de bestiole.";
			document.getElementById('bestiole_img').src = "images/bestioles/no_bestiole.png";
			document.inscription.type_animal.value = "";
		break;
		
		case "Nokotera":
			document.getElementById('bestiole_type').innerHTML = "Vous avez choisi Nokotera, votre bestiole sera donc un renard.";
			document.getElementById('bestiole_img').src = "images/bestioles/renard/renard_brunfonce.png";
			document.getElementById('type_animal').value = "renard";
			switch(couleur)
			{
				case "brunfonce":
					document.getElementById('bestiole_img').src = "images/bestioles/renard/renard_brunfonce.png";
					document.getElementById('color_animal').value = "brunfonce";
				break;
				
				case "brunpale":
					document.getElementById('bestiole_img').src = "images/bestioles/renard/renard_brunpale.png";
					document.getElementById('color_animal').value = "brunpale";
				break;
				
				case "gris":
					document.getElementById('bestiole_img').src = "images/bestioles/renard/renard_gris.png";
					document.getElementById('color_animal').value = "gris";
				break;
				
				case "beige":
					document.getElementById('bestiole_img').src = "images/bestioles/renard/renard_beige.png";
					document.getElementById('color_animal').value = "beige";
				break;
			}
		break;
		
		case "Sileronis":
			document.getElementById('bestiole_type').innerHTML = "Vous avez choisi Sileronis, votre bestiole sera donc un chimpanzé. Mais malheureusement, ce pays n'est pas encore disponible. Réessayez plus tard.";
			document.getElementById('bestiole_img').src = "images/bestioles/chimpanzee/chimpanzee_brunfonce.png";
			document.getElementById('type_animal').value = "chimpanzee";
			switch(couleur)
			{
				case "brunfonce":
					document.getElementById('bestiole_img').src = "images/bestioles/chimpanzee/chimpanzee_brunfonce.png";
					document.getElementById('color_animal').value = "brunfonce";
				break;
				
				case "brunpale":
					document.getElementById('bestiole_img').src = "images/bestioles/chimpanzee/chimpanzee_brunpale.png";
					document.getElementById('color_animal').value = "brunpale";
				break;
				
				case "gris":
					document.getElementById('bestiole_img').src = "images/bestioles/chimpanzee/chimpanzee_gris.png";
					document.getElementById('color_animal').value = "gris";
				break;
				
				case "beige":
					document.getElementById('bestiole_img').src = "images/bestioles/chimpanzee/chimpanzee_beige.png";
					document.getElementById('color_animal').value = "beige";
				break;
			}
		break;
		
		case "Etakinn":
			document.getElementById('bestiole_type').innerHTML = "Vous avez choisi Etakinn, votre bestiole sera donc un loup. Mais malheureusement, ce pays n'est pas encore disponible. Réessayez plus tard.";
			document.getElementById('bestiole_img').src = "images/bestioles/no_bestiole.png";
			document.getElementById('type_animal').value = "wolf";
			switch(couleur)
			{
				case "brunfonce":
					document.getElementById('bestiole_img').src = "images/bestioles/wolf/wolf_brunfonce.png";
					document.getElementById('color_animal').value = "brunfonce";
				break;
				
				case "brunpale":
					document.getElementById('bestiole_img').src = "images/bestioles/wolf/wolf_brunpale.png";
					document.getElementById('color_animal').value = "brunpale";
				break;
				
				case "gris":
					document.getElementById('bestiole_img').src = "images/bestioles/wolf/wolf_gris.png";
					document.getElementById('color_animal').value = "pale";
				break;
				
				case "beige":
					document.getElementById('bestiole_img').src = "images/bestioles/wolf/wolf_beige.png";
					document.getElementById('color_animal').value = "beige";
				break;
			}
		break;
		
		case "Oranajisaq":
			document.getElementById('bestiole_type').innerHTML = "Vous avez choisi Oranajisasq, votre bestiole sera donc un furet. Mais malheureusement, ce pays n'est pas encore disponible. Réessayez plus tard.";
			document.getElementById('bestiole_img').src = "images/bestioles/no_bestiole.png";
			document.getElementById('type_animal').value = "ferret";
			switch(couleur)
			{
				case "brunfonce":
					document.getElementById('bestiole_img').src = "images/bestioles/furret/furret_brunfonce.png";
					document.getElementById('color_animal').value = "brunfonce";
				break;
				
				case "brunpale":
					document.getElementById('bestiole_img').src = "images/bestioles/furret/furret_brunpale.png";
					document.getElementById('color_animal').value = "brunpale";
				break;
				
				case "gris":
					document.getElementById('bestiole_img').src = "images/bestioles/furret/furret_gris.png";
					document.getElementById('color_animal').value = "gris";
				break;
				
				case "beige":
					document.getElementById('bestiole_img').src = "images/bestioles/furret/furret_beige.png";
					document.getElementById('color_animal').value = "beige";
				break;
			}
		break;
	}
}

Pour l'avatar:

function image_out(part) {

	switch(part)
	{
		case "skin":
			if(document.getElementById('skin_av').innerHTML != "")
			{
		      document.getElementById('skin_av').innerHTML = "";
			}
			else
			{  
			    document.getElementById('skin_av').innerHTML = '<img src="images/avatar/skin/skin1.png" id="skin1" class="skin1" onclick="switch_avatar(\''+part+'\', \'skin1\')" /> ';
				document.getElementById('skin_av').innerHTML += '<img src="images/avatar/skin/skin2.png" id="skin2" class="skin2" onclick="switch_avatar(\''+part+'\', \'skin2\')" /> ';
				document.getElementById('skin_av').innerHTML += '<img src="images/avatar/skin/skin3.png" id="skin3" class="skin3" onclick="switch_avatar(\''+part+'\', \'skin3\')" /> ';
				document.getElementById('skin_av').innerHTML += '<img src="images/avatar/skin/skin4.png" id="skin4" class="skin4" onclick="switch_avatar(\''+part+'\', \'skin4\')" /> ';
				document.getElementById('skin_av').innerHTML += '<img src="images/avatar/skin/skin5.png" id="skin5" class="skin5" onclick="switch_avatar(\''+part+'\', \'skin5\')" /> ';
			}
		break;
		
		case "hair":
			if(document.getElementById('hair_av').innerHTML != "")
			{
		      document.getElementById('hair_av').innerHTML = "";
			}
			else
			{  
				document.getElementById('hair_av').innerHTML = '<img src="images/avatar/hair/hairstyle1_black.png" id="hairstyle1_black" class="hairstyle1_black" onclick="switch_avatar(\''+part+'\', \'hairstyle1_black\')" /> ';
				document.getElementById('hair_av').innerHTML += '<img src="images/avatar/hair/hairstyle1_gray.png" id="hairstyle1_gray" class="hairstyle1_gray" onclick="switch_avatar(\''+part+'\', \'hairstyle1_gray\')" /> ';
				document.getElementById('hair_av').innerHTML += '<img src="images/avatar/hair/hairstyle1_brown.png" id="hairstyle1_brown" class="hairstyle1_brown" onclick="switch_avatar(\''+part+'\', \'hairstyle1_brown\')" /> ';
				document.getElementById('hair_av').innerHTML += '<img src="images/avatar/hair/hairstyle1_blond.png" id="hairstyle1_blond" class="hairstyle1_blond" onclick="switch_avatar(\''+part+'\', \'hairstyle1_blond\')" /> ';
				document.getElementById('hair_av').innerHTML += '<img src="images/avatar/hair/hairstyle2_black.png" id="hairstyle2_black" class="hairstyle2_black" onclick="switch_avatar(\''+part+'\', \'hairstyle2_black\')" /> ';
				document.getElementById('hair_av').innerHTML += '<img src="images/avatar/hair/hairstyle2_gray.png" id="hairstyle2_gray" class="hairstyle2_gray" onclick="switch_avatar(\''+part+'\', \'hairstyle2_gray\')" /> ';
				document.getElementById('hair_av').innerHTML += '<img src="images/avatar/hair/hairstyle2_brown.png" id="hairstyle2_brown" class="hairstyle2_brown" onclick="switch_avatar(\''+part+'\', \'hairstyle2_brown\')" /> ';
				document.getElementById('hair_av').innerHTML += '<img src="images/avatar/hair/hairstyle2_blond.png" id="hairstyle2_blond" class="hairstyle2_blond" onclick="switch_avatar(\''+part+'\', \'hairstyle2_blond\')" /> ';
			}
		break;
		
		case "eyes":
			if(document.getElementById('eyes_av').innerHTML != "")
			{
		      document.getElementById('eyes_av').innerHTML = "";
			}
			else
			{  
			    document.getElementById('eyes_av').innerHTML = '<img src="images/avatar/eyes/eyes1.png" id="eyes1" class="eyes1" onclick="switch_avatar(\''+part+'\', \'eyes1\')" /> ';
			}
		break;
		
		case "nose":
			if(document.getElementById('nose_av').innerHTML != "")
			{
		      document.getElementById('nose_av').innerHTML = "";
			}
			else
			{  
			    document.getElementById('nose_av').innerHTML = '<img src="images/avatar/nose/nose1.png" id="nose1" class="nose1" onclick="switch_avatar(\''+part+'\', \'nose1\')" /> ';
				document.getElementById('nose_av').innerHTML += '<img src="images/avatar/nose/nose2.png" id="nose2" class="nose2" onclick="switch_avatar(\''+part+'\', \'nose2\')" /> ';
				document.getElementById('nose_av').innerHTML += '<img src="images/avatar/nose/nose3.png" id="nose3" class="nose3" onclick="switch_avatar(\''+part+'\', \'nose3\')" /> ';
			}
		break;
		
		case "mouth":
			if(document.getElementById('mouth_av').innerHTML != "")
			{
		      document.getElementById('mouth_av').innerHTML = "";
			}
			else
			{  
			    document.getElementById('mouth_av').innerHTML = '<img src="images/avatar/mouth/mouth1.png" id="mouth1" class="mouth1" onclick="switch_avatar(\''+part+'\', \'mouth1\')" /> ';
				document.getElementById('mouth_av').innerHTML += '<img src="images/avatar/mouth/mouth2.png" id="mouth2" class="mouth2" onclick="switch_avatar(\''+part+'\', \'mouth2\')" /> ';
				document.getElementById('mouth_av').innerHTML += '<img src="images/avatar/mouth/mouth3.png" id="mouth3" class="mouth3" onclick="switch_avatar(\''+part+'\', \'mouth3\')" /> ';
				document.getElementById('mouth_av').innerHTML += '<img src="images/avatar/mouth/mouth4.png" id="mouth4" class="mouth4" onclick="switch_avatar(\''+part+'\', \'mouth4\')" /> ';
			}
		break;
		
		case "clothes":
			if(document.getElementById('clothes_av').innerHTML != "")
			{
		      document.getElementById('clothes_av').innerHTML = "";
			}
			else
			{
				document.getElementById('clothes_av').innerHTML = '<img src="images/avatar/clothes/clothes_default.png" id="clothes_default" class="clothes_default" onclick="switch_avatar(\''+part+'\', \'clothes_default\')" /> ';
				document.getElementById('clothes_av').innerHTML += '<img src="images/avatar/clothes/clothes1.png" id="clothes1" class="clothes1" onclick="switch_avatar(\''+part+'\', \'clothes1\')" /> ';
			}
		break;
	}
}

function switch_avatar(part, partid) {
			document.getElementById(part).src = "images/avatar/"+part+"/"+partid+".png";
			document.inscription[part].value = partid;
}

À l'affichage, tout est normal, mais les valeurs ne changent pas puisque ce sont les mauvaises qui sont insérées dans la base de données.

En connaitreriez vous la cause ???

Merci beaucoup

AntoLeNice

4 décembre 2008 à 19:21:05

Anonyme

5 décembre 2008 à 6:23:32

ton code est un peu long, ça donne pas envie de déchiffrer (surtout à cette heure). Je reregarderai peut être ce soir si j'ai le temps.
Essaye de cibler plutot les morceaux de code d'ou tu pense que ça vient

5 décembre 2008 à 16:41:27

Bah justement le problème vient de partout, je change des valeurs partout...

Mais je vais donner un exemple court:

case "Nokotera":
document.getElementById('bestiole_type').innerHTML = "Vous avez choisi Nokotera, votre bestiole sera donc un renard.";
document.getElementById('bestiole_img').src = "images/bestioles/renard/renard_brunfonce.png";
document.getElementById('type_animal').value = "renard";
switch(couleur)
{
case "brunfonce":
					document.getElementById('bestiole_img').src = "images/bestioles/renard/renard_brunfonce.png";
					document.getElementById('color_animal').value = "brunfonce";
break;
				
case "brunpale":
					document.getElementById('bestiole_img').src = "images/bestioles/renard/renard_brunpale.png";
					document.getElementById('color_animal').value = "brunpale";
break;
				
case "gris":
					document.getElementById('bestiole_img').src = "images/bestioles/renard/renard_gris.png";
					document.getElementById('color_animal').value = "gris";
break;
				
case "beige":
					document.getElementById('bestiole_img').src = "images/bestioles/renard/renard_beige.png";
					document.getElementById('color_animal').value = "beige";
break;
	}
break;

Devrait modifier:

<input type="hidden" id="type_animal" name="type_animal" value="" />
<input type="hidden" id="color_animal" name="color_animal" value="brunfonce" />

Mais rien n'est modifier, et quand ça arrive dans ma base de données, la valeur est "0"...

Merci

7 décembre 2008 à 18:56:44

upp ??

9 décembre 2008 à 13:54:51

S'il vous plaît c'est assez important

Flohti

17 décembre 2008 à 9:43:41

Résolu ?

sinon, voilà ce que j'en pense, je trouve que tu fais un code très long (javascript) :

function bestiole_type(pays, color) {
    
    var indispo = ' Mais malheureusement, ce pays n\'est pas encore disponible. Réessayez plus tard.'
    var bestiole = { // on fait un tableau pour afficher directement ce qu'on veut en fonction de l'index
        'Nokotera'      :   {
            'bete'  :   'renard',
            'dispo' :   ''
        }
        'Sileronis'     :   {
            'bete'  :   'chimpanzé',
            'dispo' :   indispo
        }
        'Etakinn'     :   {
            'bete'  :   'loup',
            'dispo' :   indispo
        }
        'Oranajisaq'     :   {
            'bete'  :   'furet',
            'dispo' :   indispo
        }
    }
    
    if (pays.value == 'none') {
        document.getElementById('bestiole_type').innerHTML = "Vous ne venez d'aucun pays, vous n'avez donc pas de bestiole.";
        document.getElementById('bestiole_img').src = "images/bestioles/no_bestiole.png";
        document.inscription.type_animal.value = ""; // honnêtement, je préfère : document.getElementById('mon_element');
    }
    else {
        document.getElementById('bestiole_type').innerHTML = "Vous avez choisi "+pays+", votre bestiole sera donc un "+bestiole[pays].bete+"."+bestiole[pays].dispo;
        document.getElementById('bestiole_img').src = "images/bestioles/renard/"+bestiole[pays].bete.replace(/é/g, 'e')+"_"+color+".png";
        document.inscription.type_animal.value = bestiole[pays].bete; // ici, on voit que tu utilises un autre mot,
                                                // tu devrais utiliser les memes mots, pour justement utiliser les variables
    } // et là ton javascript est fini, optimisable mais déjà bien plus court et tu n'as pas à modifier une floppé de truc
}

Sinon, pour ce qui est de ta recuperation des données, on ne voit pas ton formulaire, et ça se passe sûrement coté serveur.

Voilà

Changement des valeurs d'un hidden input

Le changement ne se fait pas

Changement des valeurs d'un hidden input

Supprimer

Modérer

Signaler le message aux modérateurs