la boite de dialogue prompt pour confirmer

**john_wili** · 05/01/2009, 19h18

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 :

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

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 :

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

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

**Bovino** · 05/01/2009, 20h00

Tu peux essayer un truc du genre :

Code :

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

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>

et

Code :

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

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();
 
	}
 }
      }

**john_wili** · 06/01/2009, 09h47

j'ai fais exactement ça

Code :

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

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 :

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

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

**Bovino** · 06/01/2009, 10h02

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

Code :

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

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 :

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

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();
 
	}
 }
      }

**john_wili** · 06/01/2009, 10h37

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 :

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

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

**Bovino** · 06/01/2009, 11h02

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 :

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

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.

**john_wili** · 06/01/2009, 11h06

et pour avoir
le maxlengh du champs qui se trouve dans le prompt=maxlengh du champ"ND"
comment je fais??

**Bovino** · 06/01/2009, 11h11

Tu ne peux pas définir de maxlength sur un prompt (enfin, à ma connaissance...)

**john_wili** · 06/01/2009, 11h18

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

?

**E.Bzz** · 06/01/2009, 11h52

Bonjour,

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+

**john_wili** · 06/01/2009, 13h05

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

**E.Bzz** · 06/01/2009, 13h51

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.

Envoyé par john_wili

vous pouvez me dire comment (le code)??

Code :

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

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

avec

Code :

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

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+

**john_wili** · 06/01/2009, 18h21

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 :

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

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

**E.Bzz** · 07/01/2009, 09h07

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

Code :

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

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

**john_wili** · 07/01/2009, 13h24

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 :

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

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 :

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

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 :

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

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

**E.Bzz** · 07/01/2009, 13h44

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 :

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

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 :

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

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

A+

**john_wili** · 07/01/2009, 14h39

désolé pour le "e"

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 :

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

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

et on a ça:

Code :

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

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

**E.Bzz** · 07/01/2009, 14h55

As-tu essayé

Code :

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

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

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

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+

**Bovino** · 07/01/2009, 15h27

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 :

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

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

**john_wili** · 07/01/2009, 16h30

j'ai essayé déja ça

Code :

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

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 :

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

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 :

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

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 :

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

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

la boite de dialogue prompt pour confirmer

JavaScript

Discussions similaires

Partager

Partager