Bloquer un bouton input pendant x secondes

[Sephi-Chan]

Un petit effort !

<form on_submit="submitForm(event, document.getElementById('submit-button'));">

  <input id="submit-button" type="image" src="submit.png" />

</form>

Il faut virer le _ entre on et submit, c'est juste pour éviter que le forum ne fasse chier.

function submitForm(event, button){

  event.preventDefault();

  button.disabled = true;

  

  setTimeout(function(element){

    element.disabled = false;

  }, 1000, button);

}

Sephi-Chan

[Kassak]

Tu as testé cette fonction chez toi ?

Car des fois j'ai l'impression d'être un gros débile. Quand je test ta fonction chez moi, quand je clique, rien ne se passe.

Sinon je viens d'essayer ceci : onclick="this.style.display = 'none';"

Et je crois que ça marche plutôt bien.

Edit : En gros cette fonction permet de virer le bouton le temps du traitement, le mec peut toujours cliquer comme un porc, mais un seul traitement se fera à la fois. Je pense que c'est pas mal comme solution.

[Sephi-Chan]

Ça marche bien chez moi en tout cas. Essaye de mettre dans l'action une page de traitement de formulaire (en PHP), puis double-clique comme un forcené sur ton bouton, tu verras bien en lisant ton fichier de log si le script a été exécuté 2 fois.

Prends aussi la bonne habitude de ne jamais utiliser onclick pour un bouton submit : tu casses le comportement de la touche Enter. Utilise plutôt onsubmit sur l'élément form.

Bon, de toute façon maintenant tu as des pistes pour implémenter ça comme tu veux ! À toi de jouer. M'enfin c'est chiant d'écrire du Javascript raw ! Go jQuery ! :p


Sephi-Chan

[Kassak]

Ok, merci pour le conseil !

Bon, en tout cas, ça fait une semaine que je suis la dessus.. Ah je viens de voir qu'il me reste encore des cheveux, chouette !

Merci à tous

[Sephi-Chan]

Concernant la désactivation du bouton de type image, ça n'a pas vraiment l'air cross-browser, donc je te conseille d'éviter cette solution. Tu peux toutefois l'émuler. Exemple avec jQuery :

$('#attack').submit(function(event){

  var $target = $(this).find('input[type=image]');      

  if($target.hasClass('ui-disabled')){

    event.preventDefault();

  }

  

  $target.addClass('ui-disabled');

  setTimeout(function(element){

    element.removeClass('ui-disabled');

  }, 1000, $target);

});

Testé et fonctionnel.


Sephi-Chan

[gameprog2]

Un truc qui peut être cross browser sans complication c'est de mettre le bouton dans un div et de faire disparaître le DIV par la fonction lancée au moment du onclick=".."

<form name="monform" method="post" action="attaques.php" o.n.submit="attaque()">

//les divers input ici...puis le bouton submit dans le DIV :

<Div id="attaquer">

    <input type="image" src="jpg/attaque.jpg" value="Attaquer">

</div>

</form>

et le javascript :

function attaque()

{

 document.getElementById("attaquer").style.display="none";

}

Pas besoin du temps 10s car la page est envoyée de-suite et c'est le rechargement de la page qui va remettre le bouton visible si dans le css tu as mis :

#attaquer

{

display:"block";

width:100px; /* par exemple */

}

[Plume]

Un truc qui peut être cross browser sans complication c'est de mettre le bouton dans un div et de faire disparaître le DIV par la fonction lancée au moment du onclick=".."

<form name="monform" method="post" action="attaques.php" o.n.submit="attaque()">

//les divers input ici...puis le bouton submit dans le DIV :

<Div id="attaquer">

    <input type="image" src="jpg/attaque.jpg" value="Attaquer">

</div>

</form>

et le javascript :

function attaque()

{

 document.getElementById("attaquer").style.display="none";

}

Pas besoin du temps 10s car la page est envoyée de-suite et c'est le rechargement de la page qui va remettre le bouton visible si dans le css tu as mis :

#attaquer

{

display:"block";

width:100px; /* par exemple */

}

http://www.jeuweb.org/showthread.php?tid...0#pid88980

[NicoMSEvent]

Sinon je viens d'essayer ceci : onclick="this.style.display = 'none';"

Et je crois que ça marche plutôt bien.

Edit : En gros cette fonction permet de virer le bouton le temps du traitement, le mec peut toujours cliquer comme un porc, mais un seul traitement se fera à la fois. Je pense que c'est pas mal comme solution.

Si tu te place sur un champ "input" et que tu appuie sur [enter], ça soumet ton formulaire. A voir si le fait de masquer le bouton supprime aussi ce comportement (j'ai un doute la dessus)

[Kassak]

Quoi qu'il en soit, ce comportement là ne marche pas même si je ne met pas le onsubmit=machintruc.

[Sephi-Chan]

Masquer le bouton n'y fera rien, c'est pour ça qu'il ne faut réagir à l'événement submit et pas sur l'événement clic.

En revanche, l'example que j'ai donné plus haut fonctionne dans tous les cas. À toi de le porter en Javascript from scratch ou mieux : passe à jQuery ou à un autre framework Javascript, c'est quand même plus sérieux quand on développe.


Sephi-Chan