Bloquer un bouton input pendant x secondes

[Myrina]

Et pourquoi ne pas faire un aller-retour AJAX 10 secondes après le chargement qui transformerait ton image en bouton input-image?

[gameprog2]

montre ton code input kassak, pour voir

[Chandler]

Ou n'autoriser la fonction que si Javascript est activé

[Kassak]

C'est juste un input type image :

<input type="image" src="competence/attaquedirect.jpg" name="attaquer" value=""/>

[gameprog2]

Mais quel est le problème en fait ? Puisque tu sais comment faire déjà en php tu as dis.
Si c'est pour le onclick sur le input c'est :

Un input type image c'est considéré comme un bouton submit donc si tu utilise du javascript tu peux faire :

<.img. onclick="attaquer()" src="competence/attaquedirect.jpg" name="attaquer" />

(Enlève les points du début, que j'ai mis à cause du forum).

et la fonction javascript :

function attaque()

{

monformulaire.submit()

}



function attaquer()

{

setTimeout(attaque();10000);

}

Le click sur le bouton image ne lancera l'attaque que dans 10s.
Et l'attaque est l'envoi du formulaire.

J'espère que c'est ce que tu cherche ...

[Ter Rowan]

à noter que le SetTimeOut ne fait pas exactement ce que demande Kassak à mon sens puisqu'il attend x secondes AVANT de lancer la méthode (ou le submit en l'occurence)

Or le besoin est plutôt

au premier clic, submit tout de suite puis clic sans intérêt pendant au moins dix secondes

on devrait plutôt être dans une méthode du type


mafonction()
{

je lance le submit
je rend "disable" le bouton
SetTimeOut ( laFonctionQuiRendAbleLeBouton, le temps qui va bien)

}


en écrivant ceci je me demande même si le plus simple en javascript serait :

soit le submit lance un appel ajax et dans ce cas :
- rendre le bouton disable puis lancer l appel ajax
- une fois le retour ajax rendre le bouton able (pas de temps fixe, c'est ajax qui nous dit que le traitement est terminé)

soit le submit appelle une nouvelle (ou la même) page avec rechargement complet
- rendre le bouton disable
- puis lancer le submit
- et puis c'est tout, la nouvelle page affichera ce qu'il faudra

EDIT : c est ce qu'a dit Myrina juste avant en fait ^^

[Sephi-Chan]

Avec jQuery, ce que je faisais :

$('#create-user').submit(function(event){

  event.preventDefault();

  $(this).find('ubmit').attr('disabled', 'disabled');

  

  $.ajax({

    url:      '...',

    success:  function(data){

      // Si la requête réussit on fait ça.

    }

    complete: function(){

      // Dans tous les cas on réactive le bouton.

      $(this).find('ubmit').removeAttr('disabled');

    }

  })

});

Et maintenant, avec jQuery Unobstrusive Javascript (écrit pour Rails mais utilisable avec n'importe quoi), je fais ça côté HTML en mettant l'attribut data-remote à true pour que la requête soit faîte en Ajax automatiquement :

<form action="url" id="create-user" data-remote="true" method="post">

  <!-- ... -->

</form>

Et côté Javascript, ici je veux définir des hook en début et fin de la requête, donc je définis sur mon formulaire des écouteurs personnalisés, lancés automatiquement au cours du cycle de vie de la requête Ajax :

$('#create-user').bind({

  'ajax:loading':  function(){

    $(this).find('ubmit').attr('disabled', 'disabled');

  },

  'ajax:complete': function(){

    $(this).find('ubmit').removeAttr('disabled');

  }

);

Sephi-Chan

[Kassak]

Merci pour vos idées, je vais étudier ça. Pour le moment j'ai gardé le système du timer avec un ptit refresh à la fin. Et niveau PHP, une simple condition pour afficher ou non le bouton attaquer.

Et tant que j'y suis, afin d'éviter de créer un autre sujet, je voulez avoir vos avis.

L'idée de cette méthode, c'est d'éviter le mec qui clique comme un bœuf sur le bouton attaquer. Donc à part ces méthodes là, bloquer le bouton pendant x secondes après le clique, n'y a t-il pas d'autres solutions ?

J'avais essayé de bloquer le traitement si il est exécuté moins d'une seconde après le précédent, donc le mec est obligé d'attendre que le traitement soit fait avant de pouvoir recliquer. Cette solution est bonne d'après vous ? Au moins, ça règle le problème, le mec ne peut pas cliquer 40 fois.

Ou si vous avez d'autres idées ? Même Role play.. MErci =)

Edit : Ou encore, désactiver le bouton au debut du traitement, et le réactiver à la fin..

Edit 2 : Et donc toujours le même problème, peut on rendre disabled un champ input de type image lors du clique?

[Sephi-Chan]

Je te conseille de désactiver le bouton quelques instants, ne serait-ce que 300ms, juste de quoi empêcher le double-clic. Tu peux coupler ça à une protection côté serveur, genre une variable de session 'last_submit_at' que tu mets au timestamp (voire le microtimestamp) actuel sur chaque page de traitement d'un formulaire, puis tu compares la date actuelle à ta variable de session, comme ça tu vois que les appels sont très proches et tu réagis en conséquence.


Et quand tu te poses une question genre "ça marche ?", n'hésite pas à faire un petit test ! Surtout quand c'est facile comme ici :

<form action="">

  <input type="image" disabled="disabled" src="submit.png" />

</form>

Et effectivement, ça fonctionne !


Sephi-Chan

[Kassak]

Ouep, là tu as désactiver le bouton, mais le désactiver lors du clique ? (onclick="this.disabled=1").

Ça ne semble pas fonctionner sur un input type="image". Et je viens de me rendre compte que si ce petit bout de code marchait sur mon input, ça réglerait tous mes soucis. Le traitement se faisant sur une autre page et la redirection à la fin, faisant guise de refresh, réactiverait automatiquement le bouton.