la boite de dialogue prompt pour confirmer

Version imprimable

salut,
je suis vraiment débutant en javascript, je voudrais afficher une boite qui contient un champs de saisie pour confirmer ce que je saisi dans un champ de text,ensuit je fais les tests suivants:
1. je récupère la valeur saisie dans cette boite,
2. je la compare avec celle qui est saisi dans le champs de texte
3. si = je met le curseur (focus) dans le champs suivant, sinon j'affiche une alert(les 2 valeurs sont pas égales), et je vide le champs de texte pour refaire le même contrôle.

j'ai vu une discussion simélaire dans ce forum "la boite prompt"mais sans suivi alors je l’ai essayé,voila ce que j'ai fait :
Code:

1 2 3 <td> <layout:number property="ND" ondblclick="confirmer();" maxlength="12" key="Start:" ></layout:number> </td> <td> <layout:number property="NF" maxlength="12" ondblclick="confirmer();" key="End:" ></layout:number> </td>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function confirmer(){ var serial = prompt('Confirmer numéro de série debut',''); var serial1=document.recepForm.ND.value if(serial1==serial){ document.recepForm.NF.focus(); } else{ alert("numéro de série incorrect reécrire SVP"); recepForm.ND.value="serial1"; recepForm.ND.focus(); } }
ça marche bien mais j'ai 2 problèmes :
1.je veux que l'évenement qui affiche le promp c'est la touche "Entre" du clavier au lieu de "ondblclick"
2. le "maxlength" du champs qui se trouve dans le "prompt" égale le "maxlength" du champ de text "ND"

comment je peux faire ça?
merci de me répondre

Tu peux essayer un truc du genre :

Code:

1
2
<td> <layout:number property="ND"  ondblclick="confirmer();" maxlength="12" key="Start:" ></layout:number> </td>
       <td> <layout:number property="NF" maxlength="12" onkeyup="confirmer(e, this);"  key="End:"   ></layout:number> </td>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function confirmer(e, elmt){
 var e=window.event || e;
if(e.keycode==13 && elmt.value.length==elmt.maxlength){
 var serial = prompt('Confirmer numéro de série debut','');
var serial1=document.recepForm.ND.value
if(serial1==serial){
	document.recepForm.NF.focus();
   }
 else{
  alert("numéro de série incorrect reécrire SVP");
      recepForm.ND.value="serial1";
      recepForm.ND.focus();
 
	}
 }
      }

j'ai fais exactement ça

Code:

1
2
3
 
<td> <layout:number property="ND"  ondblclick="confirmer();" maxlength="12" key="Start:" ></layout:number> </td>
       <td> <layout:number property="NF" maxlength="12" onkeyup="confirmer(e, this);"  key="End:"   ></layout:number> </td>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
function confirmer(e, elmt){
 var e=window.event || e;
if(e.keycode==13 && elmt.value.length==elmt.maxlength){
 var serial = prompt('Confirmer numéro de série debut','');
var serial1=document.recepForm.ND.value
if(serial1==serial){
	document.recepForm.NF.focus();
   }
 else{
  alert("numéro de série incorrect reécrire SVP");
      recepForm.ND.value="serial1";
      recepForm.ND.focus();
 
	}
 }
      }

mais y'a une erreur " 'e' est indéfini "

je ne comprend pas ??

Effectivement, l'événement n'est pas passé en argument avec cette méthode, essaye comme ça :

Code:

1
2
<td> <layout:number property="ND"  ondblclick="confirmer();" maxlength="12" key="Start:" ></layout:number> </td>
       <td> <layout:number property="NF" maxlength="12"  key="End:"   ></layout:number> </td>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
window.onload = function(){
    document.recepForm.NF.onkeyup = function(e){
        confirmer(e, document.recepForm.NF);
    }
}
function confirmer(e, elmt){
 var e=window.event || e;
if(e.keycode==13 && elmt.value.length==elmt.maxlength){
 var serial = prompt('Confirmer numéro de série debut','');
var serial1=document.recepForm.ND.value
if(serial1==serial){
	document.recepForm.NF.focus();
   }
 else{
  alert("numéro de série incorrect reécrire SVP");
      recepForm.ND.value="serial1";
      recepForm.ND.focus();
 
	}
 }
      }

06/01/2009, 10h37
john_wili
je l'ai essayé mais ça ne marche pas (rien ne se produit) y'a meme pas un
message d'erreur ??

j'ai une question concernant la condition:
Code:

1 2 if (elmt.value.length==elmt.maxlength)
est ce que cela veut dire que le prompt va s'afficher que lorsque le maxlengh du champ"ND" est atteignt est que le maxlengh du champs qui se trouve dans le prompt=maxlengh du champ"ND"
(car c'est ce que je veux faire)

merci
06/01/2009, 11h02
Bovino

Citation:

Envoyé par john_wili

est ce que cela veut dire que le prompt va s'afficher que lorsque le maxlengh du champ"ND" est atteignt est que le maxlengh du champs qui se trouve dans le prompt=maxlengh du champ"ND"
(car c'est ce que je veux faire)

Pas tout à fait, la condition

Code:

if(e.keycode==13 && elmt.value.length==elmt.maxlength)

signifie que le prompt ne s'affichera que si la longueur maximale (maxlength) est atteinte et que tu appuies sur entrée.
06/01/2009, 11h06
john_wili

et pour avoir
le maxlengh du champs qui se trouve dans le prompt=maxlengh du champ"ND"
comment je fais??
06/01/2009, 11h11
Bovino

Tu ne peux pas définir de maxlength sur un prompt (enfin, à ma connaissance...)
06/01/2009, 11h18
john_wili

sinon y'a pas une autre solution à par le "prompt" qui contient un champ de saisi qui a un maxlengh qui m'aide à faire la confirmation :(?
06/01/2009, 11h52
E.Bzz

Bonjour,

Citation:

Envoyé par john_wili

sinon y'a pas une autre solution à par le "prompt" qui contient un champ de saisi qui a un maxlengh qui m'aide à faire la confirmation :(?

Si : ça s'appelle un formulaire ;)

Tu peux le placer dans un div auquel tu peux donner une apparence de "prompt".

Tu pourras alors lui ajouter tous les contrôles / traitements souhaités (et non prévus dans le "vrai prompt") ...

A+
06/01/2009, 13h05
john_wili

Citation:

Tu peux le placer dans un div auquel tu peux donner une apparence de "prompt".

ça cert à quoi de le mettre dans un div ??
vous pouvez me dire comment (le code)??
merci
06/01/2009, 13h51
E.Bzz
Citation:

Envoyé par john_wili

ça cert à quoi de le mettre dans un div ??

C'est juste pour éviter de créer une pop-up (mais c'est aussi faisable). En fait, pas besoin de form.

Citation:

Envoyé par john_wili

vous pouvez me dire comment (le code)??
Code:

1 2 3 <div id="le_prompt" style="display:none;"> <input type="text" id="saisie"> </div>
avec
Code:

1 2 3 4 5 6 function affPrompt() { document.getElementById('le_prompt').style.display='block'; } function cachePrompt() { document.getElementById('le_prompt').style.display='none'; }
Tu n'as plus qu'à utiliser document.getElementById('saisie').value dans ta comparaison ...

A+

j'ai essayé cette solution et ça marche bien mais coté organisation c'est pas trés fameux je m'éxplique:
quand le 2eme champ qui se trouv dans "div" apparait le champs"ND" se déplaçe un peu et pourtant voila le code :
Code:

1 2 3 4 5 6 7 8 9 <tr> <td> <layout:number property="ND" maxlength="12" ondblclick="affPrompt();" key="Start:" ></layout:number> </td> </tr> <tr> <td> <div id="le_prompt" style="display:none;"> <input type="text" id="sup" maxlength="12" ondblclick="comparer();"> </div></td> </tr>
ensuit quand ce champs disparait le "ND" retourn à sa plaçe
je ne comprend pad pourquoi?
c'est pour ça je veux utiliser la solution du "pop up"
comment je dois la définir à l'intérieur du "div"??
merci pour votre aide

07/01/2009, 09h07
E.Bzz

Pour éviter ce décalage il suffit de positionner le div en absolute :

Code:

<div id="le_prompt" style="display:none;position:absolute;top:100px;left:150px;">

top et left te permettant de la positionner au bon endroit dans ta page ...

A+

c'est bon j'ai réglé le problème du déçalage
j'ai un autre problème c'est l'evenement qui déclanche l'affichage du"div"
je veux que ça soit la touche "entree" et quand le maxlengh du"ND" soit atteignt
voila ce que j'ai fais:
Code:

1 2 3 4 5 6 <td> <layout:number property="ND" maxlength="12" onkeyup="affPrompt();" key="Start:" ></layout:number> </td> <td> <div id="le_prompt" style="display:none;;position:absolute;top:410px;left:320px;"> <input type="text" id="sup" maxlength="12" ondblclick="comparer();"> </div></td>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 window.onload = function(e){ document.recepForm.ND.onkeyup = function(e){ affPrompt(e, document.recepForm.ND); } } function affPrompt(e, elmt){ var e=window.event || e; if(e.keycode==13 elmt.value.length==elmt.maxlength){ document.getElementById('le_prompt').style.display='block'; document.getElementById('sup').focus(); } }
mais rien ne se produit quand je clique sur "entree" et le maxlenght atteignt
pour s'assurer s'il rentre bien dans la fonction j'ai modifié la condition comme suit(j'ai enlevé la 2eme condition et j'ai ajouté un "else" )pour voir s'il détect ou non la touch entree:
Code:

1 2 3 4 5 6 7 8 9 if(e.keycode==13){ document.getElementById('le_prompt').style.display='block'; document.getElementById('sup').focus(); } else { alert("c pas la touch entre"); }
ce qui se passe c'est quand je tape n'import quelle touche il m'affiche l'alert
y compris la touche "entree" donc c'est la le problème
pouviez vous me dire comment le résoudre??
merci

07/01/2009, 13h44
E.Bzz
Il n'y avait pas le "e" en paramètre du premier function dans le code de Bovino, alors que toi tu l'as ajouté :? :
Code:

1 2 3 4 window.onload = function(){ document.recepForm.NF.onkeyup = function(e){ confirmer(e, document.recepForm.NF); }
Sinon, tu as aussi oublié le && ici :

Code:

if(e.keycode==13 && elmt.value.length==elmt.maxlength){

A+

désolé pour le "e" :oops: je l'ai effectivement ajouter sans faire attention
mais pour le "&&" c'est un oubli lors de la copie

mais meme quand j'ai enlevé le "e" ça ne marche pas
voici mon code :
ici on la passe sans paramètre
Code:

1 2 <td> <layout:number property="ND" maxlength="12" onkeyup="affPrompt();" key="Start:" ></layout:number> </td>
et on a ça:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 window.onload = function(){ document.recepForm.ND.onkeyup = function(e){ affPrompt(e, document.recepForm.ND); } } function affPrompt(e, elmt){ var e=window.event || e; if(e.keycode==13 && elmt.value.length==elmt.maxlength){ document.getElementById('le_prompt').style.display='block'; document.getElementById('sup').focus(); } else { alert("c pas la touch entre"); } }
meme si j'atteign le max et je tape entree y'a toujours l'alert ??

07/01/2009, 14h55
E.Bzz
As-tu essayé

Code:

<td> <layout:number property="ND" maxlength="12" onkeyup="affPrompt(e, this);" key="Start:" ></layout:number> </td>

C'est ce qui est fait dans le code de Bovino.

Par contre, il me semble qu'il faut modifier
Code:

1 2 3 4 function affPrompt(e, elmt){ var ev =window.event || e; if(ev.keycode==13 && elmt.value.length==elmt.maxlength){ ......
Sinon, il y a conflit entre le "e" param de la fonction, et la variable locale "var e".

A confirmer par l'auteur (mais ça ne t'empêche pas de tester en attendant) ;)

A+
07/01/2009, 15h27
Bovino

Citation:

Envoyé par E.Bzz

Sinon, il y a conflit entre le "e" param de la fonction, et la variable locale "var e".

A confirmer par l'auteur (mais ça ne t'empêche pas de tester en attendant)

Non, ça ne change rien normalement.
En revanche, le conflit risque de se produire par rapport à la double déclaration du onkeyup !

EDIT :
Essaye plutôt :

Code:

<td> <layout:number property="ND" maxlength="12" key="Start:" ></layout:number> </td>

j'ai essayé déja ça

Code:

1
2
 
<td> <layout:number property="ND" maxlength="12" key="Start:"  ></layout:number> </td>

mais ça donne rien (rien ne se produit)
par contre quand je fais ça

Code:

1
2
 
 <td> <layout:number property="ND" maxlength="12" onkeyup="affPrompt();"  key="Start:" ></layout:number> </td>

ça rentre bien dans de le "else" de la fonction affPrompt();" et affiche l'alert
je crois que le problème c'est au niveau des paramètres:

quand j'ai essayé ça(j'ai pas utilisé le paramètre"elmt" ds la condition)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
 window.onload = function(){
    document.recepForm.ND.onkeyup = function(e){
        affPrompt(e, document.recepForm.ND);
    }
}
function affPrompt(e, elmt){
 var e=window.event || e;
if(document.recepForm.ND.value==document.recepForm.NF.value){
document.getElementById('le_prompt').style.display='block';
document.getElementById('sup').focus();
 }
 else
 {
 alert("c pas la touch entre");
 }

ça marche bien
mais quand j'ai fais ça:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
 window.onload = function(){
    document.recepForm.ND.onkeyup = function(e){
        affPrompt(e, document.recepForm.ND,document.recepForm.NF);
    }
}
function affPrompt(e, elmt,elmt1){
 var e=window.event || e;
if(elmt.value==elmt1.value){
document.getElementById('le_prompt').style.display='block';
document.getElementById('sup').focus();
 }
 else
 {
 alert("c pas la touch entre");
 }

y'avait une erreur "value:à la valeur null ou n'est pas un objet"??

07/01/2009, 16h47
Bovino
Bon, en fait, il y a peut-être 2 trucs qui ne vont pas :
Code:

1 2 3 4 5 6 window.onload = function(){ document.recepForm.ND.onkeydown = function(e){ var e=window.event || e; affPrompt(e, document.recepForm.ND); } }
Affecter la variable à l'événement ici (et du coup le retirer de la suite !) et affecter sur le onkeydown sera peut-être plus astucieux...
08/01/2009, 12h19
john_wili

Citation:

Bon, en fait, il y a peut-être 2 trucs qui ne vont pas :

Code :
window.onload = function(){
document.recepForm.ND.onkeydown = function(e){
var e=window.event || e;
affPrompt(e, document.recepForm.ND);
}
}Affecter la variable à l'événement ici (et du coup le retirer de la suite !) et affecter sur le onkeydown sera peut-être plus astucieux...

j'ai pas compris comment affecter la variable et du coup le retirer??

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
window.onload = function(){
    document.recepForm.ND.onkeydown = function(e){
        var e=window.event || e;
        var touche = e.keyCode;
        if(e.keyCode==13 && elmt.value.length==maxlength){
            affPrompt(document.recepForm.ND,document.recepForm.NF);
        }
    }
}
function affPrompt(elmt,elmt1){
if(elmt.value==elmt1.value){
document.getElementById('le_prompt').style.display='block';
document.getElementById('sup').focus();
 }
 else
 {
 alert("c pas la touch entre");
 }

Par exemple (à adapter si besoin...)

08/01/2009, 13h10
john_wili

y'a maintenant un problème quand je clique sur "entree" c'est le rafrichissement de la page :(
cette touche d'entree me casse la tete je vais l'abandonner
et chercher un autre moyen
merci bouceaup "Bovino" pour votre aide:wink:
08/01/2009, 13h20
Bovino

Tu dois avoir un formulaire avec un seul champ de texte, donc c'est le comportement par défaut de la touche entrée.

Fuseau horaire GMT +2. Il est actuellement 12h54.