Je suis développeur web amateur et je cherche à développer un code (en php) qui permettrait au visiteur de changer automatiquement de case.
Je m’explique :
**Visuel :
-une case pour le jour de naissance
-une case pour le mois de naissance
-une case pour l’année de naissance
** action à faire
Quand la case jour est pleine (deux chiffre, ex : 12) on passe automatiquement dans la champ mois et ainsi de suite. J’aimerais aussi que la valeur par défaut (
value=""
) puisse disparaitre quand on clique dans le champs.
Le problème ne viens pas des champs mais de l’action qui doit se produire une fois les conditions réaliser.
Là tu veux que des actions se produisent avant d’envoyer ta page au serveur.
Donc tu ne peux pas envisager d’utiliser le php, il faut que ton navigateur se débrouille tout seul.
C’est du côté du javascript qu’il faut que tu cherches.
Je pense qu’avec onkeypress() tu devrais arriver à ce que tu cherches
Pour ce qui est d’effacer la valeur par défaut, onfocus() devrait convenir.
Merci de ta réponse.:super: Donc d’après les informations que tu m’as donné il faudrait que je fasse des requête en JavaScript pour que tout se fasse automatiquement. Le problème que je vais avoir, c’est que je commence juste a développer le JavaScript donc je risque de galérer… Serait il possible, si c’est pas trop te demander de détailler un peu plus le fonctionnement que je devrais mettre en place ?
J’essaie quand de voir se que je peux faire avec les informations que tu m’a donner et j’essaie de faire avec les connaissances en JavaScript que j’ai et que je suis entrain d’avoir.
J’en ai profiter pour réviser un peu des années que j’avais pas fait de javascript, alors je t’es un peu maché le travail.
Ci-dessous le code tout fait. Juste à mieux gérer la condition du jour (pour mieux la vérifier).
Sinon, je pense que c’est ce que tu voulais.
[spoiler]
<html>
<head>
<script type="text/javascript">
<!--
function Vider(champID,condition)
{
//On vide le champ à la première entrée (quand c'est égal au paramètre)
var champ =document.getElementById(champID);
if(champ.value==condition)
{
champ.value="";
}
}
function ChampSuivant(champID,condition)
{
var champ =document.getElementById(champID);
//On vérifie qu'on a pas rentré une lettre
for(i=0;i<champ.value.length;++i)
{
if(isNaN(champ.value.charAt(i)))
{
champ.value=champ.value.replace(champ.value.charAt(i),"")
}
}
//On regarde si le champ a bien été remplie, on passe au champ suivant à ce moment là
if(champ.value.length==condition)
{
switch (champID)
{
case "jour":
if(champ.value>31) //31 pour pas me casser la tête
{
alert("Jour érronée !!!");
champ.value="";
}
else {document.formulaire.mois.focus();}
break;
case "mois":
if(champ.value>12) //bah oui, 12mois dans une année
{
alert("mois érronée !!!");
champ.value="";
}
else {document.formulaire.annee.focus();}
break;
case "annee":
if((champ.value>2011) || (champ.value<1900)) //Un formulaire pour les vieux et très jeunes^^
{
alert("Année érronée !!!");
champ.value="";
}
else {document.formulaire.valider.focus();}
break;
default:
alert("erreur, impossible d'arriver là");
break;
}
}
}
function verif_formulaire()
{
//On vérifie juste que les champs sont bien remplie la vérif est faites lorsqu'on les remplit
if(document.formulaire.jour.value=="JJ" || document.formulaire.jour.value.length!=2) //jour
{
alert("jour incorrect");
document.formulaire.jour.focus();
return false;
}
else if (document.formulaire.mois.value=="MM" || document.formulaire.mois.value.length!=2) //mois
{
alert("mois incorrect");
document.formulaire.mois.focus();
return false;
}
else if (document.formulaire.annee.value=="AAAA" || document.formulaire.annee.value.length!=4) //année
{
alert("année incorrect");
document.formulaire.annee.focus();
return false;
}
}
//-->
</script>
</head>
<body>
<form action="verification.php" name="formulaire" method="post" onSubmit="return verif_formulaire()">
<input type="text" name="jour" maxlength="2" SIZE="1" value="JJ" onFocus="Vider('jour','JJ')" onKeyUp="ChampSuivant('jour',2)"/>
<b>/</b>
<input type="text" name="mois" maxlength="2" SIZE="1" value="MM" onFocus="Vider('mois','MM')" onKeyUp="ChampSuivant('mois',2)"/>
<b>/</b>
<input type="text" name="annee" maxlength="4" SIZE="3" value="AAAA" onFocus="Vider('annee','AAAA')" onKeyUp="ChampSuivant('annee',4)"/>
<br/>
<input type="submit" value="valider" name="valider" />
</form>
</body>
</html>
Merci beaucoup pour l’aide apporter.:super: Je teste le code en modifiant un ou deux petit truc en conscéquence et je vous tiens au courant de l’avancement.