[RESOLU] Modification auto d'u champ input

Eléphanteau du PHP | 34 Messages

22 janv. 2013, 23:46

Bonjour à tous,

Je débute en javascript et là je vois pas ou est le souci.... #-o

Je veux qu'un input ayant pour id "bt" comme... batiment soit automatiquement corrigé pour correspondre à un format bien défini (Bxxx). Ce qui me donnerai ceci par exemple:
b023 -> B023
b23 ->B023
23 ->B023

J'ai donc fait ceci:
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript">
			$(document).ready(function() {
			$('#bt').on('change', function () {
				var batiment = document.getElementById("bt").value
				batiment = batiment.toUpperCase();
				// On teste si la variable batiment est seulement composé de nombre
				if(isNaN(batiment) == true){
					// Si oui, on teste s'il est inférieur à 3 chiffres pour rajouter B0 si besoin
					if(batiment.length < 3){
						// N'ayant que 2 chiffres on insère B0 avant les 2 chiffres
						batiment = concat('B0', batiment);
						document.getElementById("bt").value= batiment;
					}else{
						// On a minimum 3 chiffres on insère donc seulement le B avant les 3 chiffres
						batiment = concat('B', batiment);
						document.getElementById("bt").value= batiment;
					}
				}
				else{
					// On teste la chaine pour savoir si on commence par B
					var getB= batiment, getB.charAt(0);
					// On verifie s'il y a 2 ou 3 chiffres
					if(getB == B){
						if(batiment.length < 3){
							// On a 2 chiffres après le B, donc on insère un 0
							batiment = batiment.substring(0) + "0" + str.substring(1,2);
							document.getElementById("bt").value= batiment;
						}else{
							// On à 3 Chiffres donc on ne touche à rien
							document.getElementById("bt").value= batiment;
						}
					}
				}
			}
		</script>
	</head>
	<body>
		<span>
			<label for="batiment">Bâtiment: </label><input type="text" name="batiment" id="bt" maxlength="10"/>
		</span>
	</body>
</html>
Au début, je pensais faire une fonction verifBatiment() avec un this.value en paramètre et du coup un return de la variable batiment, mais ça n'a pas fonctionné donc je suis partie sur l'id du champ désiré même si c'est pas réutilisable dans d'autres pages (mais bon je verrai plus tard :D )

Est-ce que quelqu'un pourrait me dire ce qu'il ne va pas? après c'est mon premier script en JS donc soyer indulgent...

En vous remerciant par avance

maxredphenix

ViPHP
ViPHP | 1996 Messages

23 janv. 2013, 23:23

Si j'ai bien compris tu veux que la valeur soit B+3 chiffres ?
It is nice to be important but it is more important to be nice
http://www.aureuswebfactory.fr

Eléphanteau du PHP | 34 Messages

24 janv. 2013, 12:21

Bonjour,

Merci pour ta réponse.

Oui c'est tout à fait cela. Par exemple:
B001
B010
B100

mais en aucun cas:
B1, b1, B01, b01
B10, b10
etc...

Tu penses que c'est possible de faire cela en simplifiant mon code (qui ne fonctionne pas :cry: )

Merci

Eléphant du PHP | 130 Messages

24 janv. 2013, 19:46

Tu peux faire une expression régulière pour vérifier que ce qui est entré correspond au format que tu veux.
Si cela ne correspond pas et que l'élément rentré est un chiffre tu enlève tous les 0 avant le premier chiffre différent de 0. Si ce chiffre est plus grand que 3 caractère tu sors un message d'erreur par exemple 45541 tu ne sais pas quel chiffre prendre. Si ce chiffre comprend 1 ou 2 caractère tu rajoutes 2 ou 1 zéro.

Si il est du type lettre + chiffre tu décomposes d'une part la lettre et d'autre part le chiffre en appliquant l'algorithme ci dessus et tu met la lettre en majuscule. Une petite concaténation du tout pour sortir la variable que tu souhaites.

Eléphanteau du PHP | 34 Messages

24 janv. 2013, 22:01

Merci pour ta réponse,

J'ai pensé au regex pour vérifier le format mais certain bâtiment peuvent être nommé avec une appellation (Batiment vie) et non un code (Bxxx).

Je suis donc partie sur ce test seulement pour les bâtiment utilisant un code. De toute façon il ne peut il y avoir que des valeurs tels que celle citées dans mon précédent post:
10, 010, b10, b010, B010 ou autre chose et la on fait rien.

Mon code de base correspond un peu prêt à ce qu'il faut faire pour la décomposition?

Encore merci

Eléphanteau du PHP | 34 Messages

01 févr. 2013, 22:44

J'ai due partir quelques temps.

Je viens seulement de me remettre dans ce script.

Penses-tu qu'une expression régulière pourra faire le boulot nécessaire pour tester si cela est un nom de bâtiment 10,010,B010 ou un simple nom style bâtiment dix ?

Merci

ViPHP
ViPHP | 1996 Messages

02 févr. 2013, 08:28

Un expression régulière testera le type :

[javascript]var motif = "^(b|B){1}([0-9]{1,3}$";
var drapeau = "gi";
var exp = new RegExp(motif,drapeau);
if (exp.test(chaineATester))
{
//valeur vrai
}
else
{
//valeur fausse
}[/javascript]

Si je ne me suis pas trompé (a vérifier) le motif autorise la lettre b ou B avec 1 à 3 chiffres derrière.
It is nice to be important but it is more important to be nice
http://www.aureuswebfactory.fr

Eléphanteau du PHP | 34 Messages

02 févr. 2013, 12:11

Merci pour ta réponse,

J'ai tenter comme ci-dessous:

Code : Tout sélectionner

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> function testBatiment (batiment){ var bat = batiment.toUpperCase(); var motif = "^(B){1}([0-9]{1,3}$"; var drapeau = "gi"; var exp = new RegExp(motif,drapeau); // Si la valeur rentrée commence bien par B suivie de 1 à 3 chiffres alors if (exp.test(bat)){ if(bat.length < 3){ // On a 2 chiffres après le B, donc on insère un 0 var newBat = concat('B0', bat); return newBat; }else{ // On à 3 Chiffres donc on ne touche à rien return bat; } } // La valeur rentrée ne commence pas par Bxxx else{ // On teste si la valeur est seulement composée de chiffre (010;10;etc...) if(isNaN(bat) == true){ // Si oui, on teste si il est inférieur à 3 chiffres pour rajouter B0 si besoin if(bat.length < 3){ // N'ayant que 2 chiffres on insère B0 avant les 2 chiffres var newBat = concat('B0', bat); return newBat; }else{ // On a minimum 3 chiffres on insère donc seulement le B avant les 3 chiffres var newBat = concat('B', bat); return newBat; } }else{ // La valeur n'est pas composée de chiffre et ne commence pas par Bxxx donc ne touche à rien return bat; } } } </script> </head> <body> <span> <label for="batiment">Bâtiment: </label><input type="text" name="batiment" id="bt" maxlength="10" onchange="testBatiment(this.value)"/> </span> </body> </html>
Mais j'ai l'erreur suivante:
syntaxError: undefined parenthetical à la ligne 10, ce qui correspond à :
var exp = new RegExp(motif,drapeau);

mais j'ai regardé sur google et ton expression est correct donc c'est assez bizarre..

ViPHP
ViPHP | 1996 Messages

02 févr. 2013, 17:33

Il manque une parenthèse fermante

[javascript]var motif = "^(B){1}([0-9]{1,3})$";[/javascript]
It is nice to be important but it is more important to be nice
http://www.aureuswebfactory.fr

Eléphanteau du PHP | 34 Messages

02 févr. 2013, 23:18

Oula ça craint, j'ai regarder plein de site sur le regex en javascript et autre parce que j'ai même pas fait attention à la parenthèse...... #-o

J'ai fait des tests avec des ALERT et il me détecte bien les différents stades. J'en suis donc à ça maintenant:

Code : Tout sélectionner

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> function testBatiment (id, batiment){ var bat = batiment.toUpperCase(); var motif = "^(B){1}([0-9]{1,3}$)"; var drapeau = "gi"; var exp = new RegExp(motif,drapeau); // Si la valeur rentrée commence bien par B suivie de 1 à 3 chiffres alors if (exp.test(bat)){ if(bat.length < 4){ // On a 2 chiffres après le B, donc on insère un 0 var newBat = concat('B0', bat); var inputValue = document.getElementById(id); }inputValue.value = newBat; } // La valeur rentrée ne commence pas par Bxxx else{ // On teste si la valeur est seulement composée de chiffre (010;10;etc...) if(!isNaN(bat)){ // Si oui, on teste si il est inférieur à 3 chiffres pour rajouter B0 si besoin if(bat.length < 4){ // N'ayant que 2 chiffres on insère B0 avant les 2 chiffres var newBat = concat('B0', bat); var inputValue = document.getElementById(id); }else{ // On a minimum 3 chiffres on insère donc seulement le B avant les 3 chiffres var newBat = concat('B', bat); var inputValue = document.getElementById(id); }inputValue.value = newBat; } } } </script> </head> <body> <span> <label for="batiment">Bâtiment: </label><input type="text" name="batiment" id="bt" maxlength="10" onchange="testBatiment('bt',this.value)"/> </span> </body> </html>
Il me reste encore quelques problèmes de déclaration de variable non déclarées et 2-3 autres trucs, j'ai du mal avec le JS.

Encore merci

Eléphanteau du PHP | 34 Messages

04 févr. 2013, 21:50

Bonsoir,

Ça y est j'y suis enfin, j'ai réussi à obtenir ce que je voulais:
<span>
	<label for="batiment">Bâtiment: </label><input type="text" name="batiment" id="bt" maxlength="10" onchange="verifBat(this.value)"/>
</span>
[javascript]function verifBat(batiment) {
var bat = batiment.toUpperCase();
var longueur = bat.length;
var motif = "^(B){1}([0-9]{1,3}$)";
var drapeau = "gi";
var exp = new RegExp(motif,drapeau);
// Si la valeur rentrée commence bien par B suivie de 1 à 3 chiffres alors
if (exp.test(bat)){
var regBat = new RegExp ("(B)","g");
switch (longueur){
case 2:var newBat = bat.replace(regBat,"B00");break;// Si on a 2 caractères soit Bx alors on remplace le B par B00
case 3:var newBat = bat.replace(regBat,"B0");break;// Si on a 2 caractères soit Bxx alors on remplace le B par B0
default:var newBat = bat;break;// Si cela ne correspond pas au critères précedents alors on retourne la valeur rentrée par l'utilisateur
}document.getElementById('bt').value = newBat;
}
// La valeur rentrée ne commence pas par Bxxx
else{
// On teste si la valeur est seulement composée de chiffre (010;10;etc...)
if(!isNaN(bat)){
// Si oui, on teste si il est inférieur à 3 chiffres pour rajouter B0 si besoin
switch (longueur){
case 1:var valeur = 'B00';var newBat = valeur.concat(bat);break;// N'ayant que 1 chiffres on insère B00 avant les 2 chiffres
case 2:var valeur = 'B0';var newBat = valeur.concat(bat);break;// N'ayant que 2 chiffres on insère B0 avant les 2 chiffres
case 3:var valeur = 'B';var newBat = valeur.concat(bat);break;// N'ayant que 3 chiffres on insère B avant les 2 chiffres
default:var newBat = bat;break;// Si cela ne correspond pas au critères précedents alors on retourne la valeur rentrée par l'utilisateur
}document.getElementById('bt').value = newBat;
}
}
}[/javascript]

Voili voilou.

Encore merci de ton aide

ViPHP
ViPHP | 1996 Messages

05 févr. 2013, 20:28

Pas de problème : tu as fais le gros du travail ;-)
It is nice to be important but it is more important to be nice
http://www.aureuswebfactory.fr