Sujet Précédent Sujet Suivant

Grise bouton X seconde au chargement de la page

lyonia Messages postés 3 Date d'inscription jeudi 9 août 2018 Statut Membre Dernière intervention 16 août 2018 - Modifié le 9 août 2018 à 17:18
jordane45 Messages postés 37516 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 juin 2023 - 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.

2 réponses

Réponse 1 / 2
jordane45 Messages postés 37516 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 juin 2023 341
9 août 2018 à 17:23
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 ?



0
lyonia Messages postés 3 Date d'inscription jeudi 9 août 2018 Statut Membre Dernière intervention 16 août 2018
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.
0
jordane45 Messages postés 37516 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 juin 2023 341
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
0
Réponse 2 / 2
lyonia Messages postés 3 Date d'inscription jeudi 9 août 2018 Statut Membre Dernière intervention 16 août 2018
Modifié le 16 août 2018 à 17:46
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.
0
jordane45 Messages postés 37516 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 juin 2023 341
Modifié le 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()">
0
Rejoignez-nous