Grise bouton X seconde au chargement de la page

lyonia 3 Messages postés jeudi 9 août 2018Date d'inscription 16 août 2018 Dernière intervention - 9 août 2018 à 16:09 - Dernière réponse : jordane45 22130 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 août 2018 Dernière intervention
- 16 août 2018 à 17:57
Bonjour,

Je suis à la recherche d'un petit bout de code permettent de bloquer l'utilisateur pendant quelques secondes pour ne pas que celui-ci "spam" clique afin de passer les étapes trop rapidement.

J'ai trouvé l'élément "onload" mais celui-ci ne marche pas dans mon cas car j'utilise un <input type=button>

Voici ce que j'ai pu trouvé :
<input type="button" class="btn btn-danger btn-lg" onclick="attente(this)" value="XXXXX" id="XXXXXX"/>

<script>
function attente(champ) {
champ.disabled = true;
setTimeout(function(){champ.disabled=false;},5000);
}
function checkCookies() {
       document.getElementById("XXXXXX").disabled = true;
}
</script>


EDIT : Ajout des balises de code

Pour le moment mon bouton réagit sur un onclick donc pas du tout ce que je souhaiterai faire.

Si vous auriez des propositions ou une petite aide a m'apporté afin de corrigé cela.

Merci d'avance pour votre aide.
Afficher la suite 

Votre réponse

5 réponses

jordane45 22130 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 août 2018 Dernière intervention - 9 août 2018 à 17:23
0
Merci
Bonjour,

J'ai trouvé l'élément "onload" mais celui-ci ne marche pas dans mon cas car j'utilise un <input type=button>

Quel est le souci ?
le onload se place sur le body... et déclenche une fonction lorsque la page est chargée.... peu importe que ton bouton soit un input ou une image.... je ne vois vraiment pas le rapport.

Pour le moment mon bouton réagit sur un onclick donc pas du tout ce que je souhaiterai faire

Quel est ton besoin exactement ?



lyonia 3 Messages postés jeudi 9 août 2018Date d'inscription 16 août 2018 Dernière intervention - 9 août 2018 à 17:35
Bonjour Jordane45,

Et bien pour être précis je souhaiterai trouver quelque chose afin de grisé le bouton pendant quelques seconde lorsque l'utilisateur arrive sur la page. Mais uniquement sur ce bouton.

Le problème avec "onload" est que ne souhaiterai agir uniquement sur ce bouton et non sur tout le contenu de ma page.

Merci de t'a réponse.
jordane45 22130 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 août 2018 Dernière intervention - 9 août 2018 à 20:01
Et ben.. dans le onload tu appelles la fonction que tu nous a posté et ca devrait fonctionner..
Et puis en plus tu pourrais, de base, mettre le bouton en disabled
Et il ne s'activerait qu'après qq secondes comme tu le souhaites
Commenter la réponse de jordane45
lyonia 3 Messages postés jeudi 9 août 2018Date d'inscription 16 août 2018 Dernière intervention - Modifié par jordane45 le 16/08/2018 à 17:46
0
Merci
Oui voila j'ai pu trouvé quelque chose qui fonctionne plus ou moins.

Mais le problème c'est que je charge mes bouton avec un for
Et le problème c'est quant faisant un <body onload> qui contient mon for avec l'affichage des boutons cela n’exécute la fonction qui grise le bouton seulement sur le 1er des boutons.

Il y aurait-il quelque chose qui me permettrai de solutionné ce problème ? :/
<body onload="attente(this)">

MON FOR
{
  <input id="bouton" type="button" target="_self" href="#" class="btn btn-danger btn-lg" value="XXXXX" id="bouton"/> />
  
<script>
function attente(champ) {
champ.disabled = false;
document.getElementById("bouton").disabled = true;
setTimeout(function() {
document.getElementById("bouton").disabled=false;},2000);
}  
</script>  
</body>


EDIT : Ajout des balises de code

Merci d'avance pour t'a réponse.
jordane45 22130 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 août 2018 Dernière intervention - 16 août 2018 à 17:57
Bonjour,

1 - Quand tu postes du code sur le forum, merci d'utiliser les BALISES DE CODE
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

2 - Si tu as plusieurs boutons... tu dois déclencher la fonction pour chacun d'eux....
Il faut, bien entendu avoir un ID UNIQUE ( id signifiant IDENTIFIANT ) pour chaque bouton.
Pour boucler sur chaque bouton, tu pourrais y ajouter un CLASS et t'en servir dans ton js..

un truc du genre

<input id="bouton1" type="button" target="_self" href="#" class="btn btn-danger btn-lg btnTimer" value="XXXXX" id="bouton"/>

function init();
  // boucle sur tous les boutons ayant la class btnTimer
  var boutons = document.getElementsByClassName('btnTimer');
  for (i = 0; < boutons.length; i++) {
        var ele = boutons[i];
       attente(ele.id); // on lance l'attente sur l'élément
       ele.onclick = attente(ele.id); // on lui attache le onclick pour qu'il relance la fonction quand on clic dessus
  }
}
function attente(champid) {
  document.getElementById(champid).disabled = true;
  setTimeout(function() {
     document.getElementById(champid).disabled=false;
  },2000);
}


et donc dans ton onload
<body onload="init()">
Commenter la réponse de lyonia

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.