+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Bloquer un bouton input pendant x secondes (/showthread.php?tid=1318)
RE: Bloquer un bouton input pendant x secondes - Sephi-Chan - 11-10-2010
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
RE: Bloquer un bouton input pendant x secondes - Kassak - 11-10-2010
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.
RE: Bloquer un bouton input pendant x secondes - Sephi-Chan - 11-10-2010
Ç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
RE: Bloquer un bouton input pendant x secondes - Kassak - 11-10-2010
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
RE: Bloquer un bouton input pendant x secondes - Sephi-Chan - 11-10-2010
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
RE: Bloquer un bouton input pendant x secondes - gameprog2 - 11-10-2010
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 */
}
RE: Bloquer un bouton input pendant x secondes - Plume - 11-10-2010
(11-10-2010, 10:22 PM)gameprog2 a écrit : 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=7021&pid=88980#pid88980
RE: Bloquer un bouton input pendant x secondes - NicoMSEvent - 12-10-2010
(11-10-2010, 09:44 PM)Kassak a écrit : 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)
RE: Bloquer un bouton input pendant x secondes - Kassak - 12-10-2010
Quoi qu'il en soit, ce comportement là ne marche pas même si je ne met pas le onsubmit=machintruc.
RE: Bloquer un bouton input pendant x secondes - Sephi-Chan - 12-10-2010
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