Test de valeur avec caractères spéciaux html

**Jhulk** · 29/08/2018, 10h56

Bonjour,

Je n'arrive pas à trouver de réponse sur le web ou ce forum pour cette problématique :

J'ai ma page HTML qui est un formulaire avec des menus :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<select id="menuType" name="menu" onchange="FieldVisibilityManagement()">
<option>Non r&eacute;ception du code</option>
<option>Transaction absente</option>
<option>SMS re&ccedil;u &agrave; tord</option>
<option>Autres</option>
</select>

Et je souhaite avoir des interactions lorsque l'utilisateur renseigne telle ou telle valeur.
Pour cela j'ai ma fonction FieldVisibilityManagement qui fait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var SelectionValueEnv = document.getElementById("menuType").value;
	if (SelectionValueEnv == "SMS re&ccedil;u &agrave; tord"){
		var a = document.getElementById("TelLabel");
		a.style.fontWeight = "bold";
	}

Le problème c'est que je ne rentre jamais dans le if.
J'ai essayé "SMS reçu à tord", donc sans le remplacement de valeurs spéciales, j'ai essayé la fonction escape, mais rien n'y fait.

Invité · 29/08/2018, 11h15

Bonjour,

1- il est préférable de toujours mettre des value aux <option> d'un <select>.

2- Elles peuvent être numériques (ça simplifiera ta problématique !) :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<select id="menuType" name="menu" onchange="FieldVisibilityManagement()">
   <option value="1">Non r&eacute;ception du code</option>
   <option value="2">Transaction absente</option>
   <option value="3">SMS re&ccedil;u &agrave; tord</option>
   <option value="9">Autres</option>
</select>

Du coup, la fonction JS devient :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var SelectionValueEnv = Number(document.getElementById("menuType").value); // on transforme en numérique
	if (SelectionValueEnv == 3){ // SMS reçu à tort
		var a = document.getElementById("TelLabel");
		a.style.fontWeight = "bold";
	}

3-Remarques:
3a- Supposons que ton site soit multilingue :

les noms vont changer (traduction dans la langue)
mais les value seront les mêmes

Le script JS ne changera pas.

3b- on écrit "à tort".

**Jhulk** · 29/08/2018, 11h31

Merci beaucoup, je vais procéder comme ça.

Juste par curiosité, en dehors de cette bonne pratique, si jamais via un autre problématique je rencontrais le même type de soucis avec les caractères spéciaux, comment résout-on cette histoire de caractères spéciaux HTML qui semble-t-il se comporte différemment quand on arrive au javascript ?

Invité · 29/08/2018, 11h46

En général, on ne fait jamais comme tu as fais !

Il n'y a pas à résoudre ce genre de problème si :

on utilise UTF-8
+ fichier encodé/converti en UTF-8 sans BOM (important !)

Mettre ton site en UTF-8 devrait régler le problème.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<select id="menuType" name="menu" onchange="FieldVisibilityManagement()">
	<option>Non r&eacute;ception du code</option>
	<option>Transaction absente</option>
	<option>SMS re&ccedil;u &agrave; tort</option>
	<option>Autres</option>
</select>

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
function FieldVisibilityManagement()
{
	var SelectionValueEnv = document.getElementById("menuType").value;
	console.log(SelectionValueEnv);
	if( SelectionValueEnv == 'SMS reçu à tort' )
	{
		alert(SelectionValueEnv + ' : OK !');
	}
}

Ça fonctionne (en UTF-8).

Structure HTML minimum + fichier encodé/converti en UTF-8 sans BOM (important !) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
 
</body>
</html>

**Jhulk** · 29/08/2018, 13h38

Merci encore, je vous confirme, après avoir testé les deux méthodes fonctionnent, je garde la méthode d'avoir une valeur associée à l'option. (tout en ayant un fichier encodé en utf8)

Test de valeur avec caractères spéciaux html

JavaScript

Discussions similaires

Partager

Partager