Limiter un button à 1 seul click

Version imprimable

08/02/2008, 16h15
skillipo

Limiter un button à 1 seul click

bonjour,

Dans ma JSP j'ai un button avec onClick qui appel une Fuction javaScript, il se trouve que quand je click dessus par exemple 2 fois l'action s'execute 2 fois .

Ya t'il un moyen de limiter le click a 1seul click par exemple.

ou par exemple Grisé le boutton apres le click ??:bug:

Merci:king:
08/02/2008, 16h41
mattheox

1) tu peux récupérer l'événement du double-clic en javascript :

Code:

onDoubleClick="return false;"

2) tu peux cacher le bouton lors du clic et le remplacer par du texte/image non cliquable en javascript sur l'événement onclick

comme ça... une seule soumission sera possible
09/02/2008, 19h52
Lorantus

Personnelement,

le bouton demande un traitement (et donc un résultat) au serveur. J'ai donc entièrement grisé la page.

L'utilisateur clic sur le bouton et attend la réponse. Si le temps d'attente est trop grand (0.8s), la page devient toute grise. J'utilise pour cela un motif semi-transparent, avec un CSS(z-order) au-dessus des éléments HTML. Le bouton est bloqué et le reste le page aussi d'ailleurs.
11/02/2008, 10h30
skillipo

Bonjour Lorantus,

peut tu me donner le code pour griser le bouton .

cordialement

Un peu tard, mais bon, pour la connaissance :
- le fichier .js (j'ajoute un message d'attente):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
var loadingTimeOut=800;
var loadingAnim="../../skins/shinny.black/images/indicator.gif";
var loadingInfo="Chargement en cours.";
 
window.onbeforeunload=function(){
    if(loadingTimeOut>0)
        setTimeout('loading()',loadingTimeOut);
    if(loadingTimeOut==0)
        loading();
}
 
function loading(){
    var el0=document.createElement("div");
    el0.id="loading";
    var el1=document.createElement("div");
    el1.id="infoBox";
    if(loadingAnim!=null && loadingAnim!="")
        el1.innerHTML="<img src='"+loadingAnim+"'/>&nbsp;";
    el1.innerHTML+=loadingInfo;
    el0.appendChild(el1);
 
    el0.style.height=document.body.scrollHeight;
    el0.style.width=document.body.clientWidth;
    document.body.appendChild(el0);
    el1.style.top=document.body.scrollTop+100;
}

-et un .css pour agrémenter cela :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
/* 
    Document   : loading
    Created on : 9 avril 2007, 10:21
    Author     : Lorantus
    Description:
        loading plug-in css.
*/
#loading{
    background-image: url(../images/semi-transparent.gif);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1000;
}
 
#loading #infoBox{
    background-color: #E0E0E0;
    border: 1px solid black;
    font-size: 80%;
    font-weight: bold;
    height: 1em;
    left: 100px;
    padding: 5px;
    position: absolute;
    top: 100px;
    vertical-align: top;
    width: 200px;
}