Désactivation de plusieurs soumissions sur des formulaires HTML

Question

Si mon utilisateur clique plusieurs fois sur un bouton de soumission d'un formulaire, il envoie essentiellement plusieurs demandes GET/POST (en fonction des préférences du formulaire). Je trouve que la désactivation du bouton de soumission en utilisant JS est un peu problématique, car si un utilisateur essaie d'arrêter (bouton ESC/Stop), il ne réinitialise pas le bouton (sauf si vous l'attrapez et le manipulez à nouveau avec JS)), si l'utilisateur revient (bouton Précédent) de la page suivante, le bouton d'envoi est toujours désactivé (au moins dans Firefox).

Quelle est la meilleure pratique pour désactiver les soumissions de formulaires multiples.

Merci!

Answer 1

Javascript fonctionne bien pour moi. S'assurer que le (s) bouton (s) est de retour activé lorsque l'utilisateur annule sa soumission fait partie de la convivialité.

Si vous ne voulez pas désactiver vos boutons en utilisant javascript, alors peut-être sur le côté serveur vous pourriez attraper des messages en double dans un certain laps de temps?

Answer 2

cela pourrait ne pas répondre à votre question, mais je pense que de générer quelque chose uniq pour identifier la demande sur le côté serveur pourrait être une meilleure idée. La validation côté client est toujours problématique.

Answer 3

lier le désactiver à présenter de la forme et son désactiver à la charge de la page (pour réinitialiser lorsque vous actualisez/revenir en arrière):

function disableSubmits(domNode, toDisable) 
{ 
    domNode = domNode || document.getElementsByTagName('body')[ 0 ]; 

    toDisable = !!toDisable; 

    for(var i = 0; i < inputs.length; ++i) 
    { 
     if('submit' === inputs[i].getAttribute('type')) 
     { 
      inputs[i].disabled = toDisable; 
     } 
    } 
} 

var onloadhandler = function() 
{ 
    var theForm = document.getElementById('theForm'); 

    theForm.onsubmit = function(){ disableSubmits(theForm, true); } 

    disableSubmits(theForm, false); 
}; 

var old = window.onload; 

window.onload = 'function' === typeof old 
       ? function(){ old(); onloadhandler(); } 
       : onloadhandler;