Discussion :

[Aglae69]

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 :

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

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 :

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

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

[vermine]

Bonjour,

Lorsque vous écrivez ceci:

Code :

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

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.

[Aglae69]

Je viens de corriger et cela fonctionne.
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
J'ai désormais le code suivant

Code :

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

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; ?>" />

[vermine]

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

Code :

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

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

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

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

[Aglae69]

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

[Tellounet]

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

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

PHP:

Code :

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

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

JS:

Code :

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

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

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!

[cablé]

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

Code :

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

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