Passer d'un champ à l'autre automatiquement dans un formulaire

Bonjour tous,
J'ai besoin de votre aide car je cherche à utiliser le script paru sur ce site ici pour passerd'un champ à un autre dans un formulaire.
en effet j'ai du faire 3 inputs pour rédiger une date (jour, mois annee) et je souhaite simplifier l'utilisation en passant automatiquement au champs suivant lorsque le nb de caractère spécifié dans mon input est ok.

J'ai donc mon script de javascript dans le head

Code:

---

1 2 3 4 5 6 7 8

<script type="text/javascript"> function Autotab(box, longueur, texte) { if (texte.length > longueur-1) { document.getElementById('TB'+box).focus(); } } </script>

---

et dans body j'ai fait

Code:

---

1 2 3 4 5

<p>Date : <input type="text" size="1" maxlength="2" name="jour" id="jour" tabindex="1" onkeyup="Autotab(2, this.size, this.value)" value="<?php echo $jour; ?>" /> / <input type="text" size="1" maxlength="2" name="mois" id="mois" tabindex="3" onkeyup="Autotab(3, this.size, this.value);" value="<?php echo $mois; ?>" /> / <input type="text" size="3" maxlength="4" name="annee" id="annee" tabindex="2" value="<?php echo $annee; ?>" /> </p>

---

Le truc c'est que j'ai pas d'erreur mais cela fonctionne pas.
Je connais rien en javascript, voyez vous ce qui déconne :?

Merci de votre aide

Bonjour,

Lorsque vous écrivez ceci:

Code:

---

document.getElementById('TB'+box).focus();

---

Vous cherchez en fait un élément dont l'id serait "TBi" où i varie de 1 à 3. Or vos éléments ont pour id "jour", "mois" et "annee". Il faudrait faire concorder les id.


PS: les erreurs javascripts arrivent principalement en bas à gauche de votre navigateur. Un petit triangle jaune sur lequel vous pouvez cliquer.

Je viens de corriger et cela fonctionne.:P
Merci pour cette explication

Par contre j'ai un soucis sur le second champ car il passedirectement au 3ème champ dés que j'ai remplis 8O
J'ai désormais le code suivant

Code:

---

1 2 3 4

<input type="text" size="2" maxlength="2" name="jour" id="TB1" tabindex="1" onkeyup="Autotab(3, this.size, this.value)" value="<?php echo $jour; ?>" /> / <input type="text" size="2" maxlength="2" name="mois" id="TB2" tabindex="3" onkeyup="Autotab(3, this.size, this.value);" value="<?php echo $mois; ?>" /> / <input type="text" size="3" maxlength="4" name="annee" id="TB3" tabindex="2" value="<?php echo $annee; ?>" />

---

Oui, dans votre champ "jour", vous demander de passer au champ 3, c'est normal. ;)

Code:

---

<input type="text" size="2" name="jour" id="TB1" onkeyup="Autotab(3, this.size, this.value)" /> /

---

Le premier paramètre de la fonction Autotab est le numéro qui suit l'id "TB" du champ. "TB1", "TB2", "TB3". Remplacez le 3 par 2:

Code:

---

<input type="text" size="2" name="jour" id="TB1" onkeyup="Autotab(2, this.size, this.value)" /> /

---

merci de vos réponses, cela fonctionne niquel
Bonne journée à tous
:D

Merci beaucoup, le script m'a énormément aidé.

Ceci étant je l'ai légèrement simplifié:

PHP:

Code:

---

<input type="text" size="2" maxlength="2" name="jour" id="TB1" tabindex="1" onkeyup="Autotab(3, this.value)" value="<?php echo $jour; ?>" />

---

JS:

Code:

---

1 2 3 4 5 6 7 8

<script type="text/javascript"> function Autotab(box, texte) { if (texte.length > 1) { document.getElementById('TB'+box).focus(); } } </script>

---

En effet, jusqu'à preuve du contraire les jours et les mois sont sur 2 caractères chacun, donc on a une valeur commune et fixe, du moins pour notre cas précis. Hop, une variable en moins, c'est ça de gagné!
Une date américaine, là c'est différent :lol:

Autre chose: je suis d'accord qu'HTML n'est pas très exigeant sur les ';' de fin d'instruction du javascript inclus, mais ça serait plus propre soit de le mttre partout, soit nulle part ;)

Encore merci!

Salut et merci à tous pour l'aide

J'essaye de faire pareil mais avec plusieurs champs (plus que 3 quoi) et j'ai vraiment du mal à comprendre le principe pour continuer (pourtant ca parait simple... :calim2:)

Code:

---

1 2 3 4 5 6

<input type="text" size="13" maxlength="13" length="20" name="TB1" id="TB1" tabindex="1" onkeyup="Autotab(2, this.size, this.value)" /> <input type="text" size="13" maxlength="13" name="TB2" id="TB2" tabindex="2" onkeyup="Autotab(3, this.size, this.value);" /> <input type="text" maxlength="13" name="TB3" id="TB3" tabindex="3" onkeyup="Autotab(4, this.size, this.value);"/> <input type="text" maxlength="13" name="TB4" id="TB4" tabindex="4" />

---

D'avance merci