Formulaire de date de naissance spécifique avec saut automatique de champ

Bonsoir à tous,

Je suis développeur web amateur et je cherche à développer un code (en php) qui permettrait au visiteur de changer automatiquement de case.:confused:

Je m’explique :slight_smile: :

**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.


<form action="verification.php" method="post">

<input type="text" name="jour" value="10"/>
<input type="text" name="mois" value="06"/>
<input type="text" name="annee" value="2010"/>

</form>

Je suppose qu’il faudra, en plus du code php, mettre du CSS.

J’ai chercher pas mal de fois sur des sites (code source), des tutoriels ou sujet, mais j’ai pas trouver se qui me concernait.

Merci de votre aide :wink:

Jerem96
Edité le 07/09/2011 à 16:13

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.

Bonjour,

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.

En tout cas, encore merci.:o)

Jerem96

Bonjour,

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. :slight_smile:

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>

[/spoiler]
Edité le 17/06/2011 à 15:42

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.

Encore merci et à bientôt;)

Jerem96