2010-10-19 10 views
1

J'ai un formulaire qui insère des données dans DB sur le bouton Soumettre mais le problème est lorsque le client clique plusieurs fois sur le bouton envoie plusieurs demandes de création signifie plusieurs événements de clic de bouton pour le même temps.Soumettre multiple Cliquez sur le bouton Problème?

J'ai essayé de désactiver le bouton lorsque le client cliquait sur le bouton Soumettre pour la première fois mais après cela il n'appelle pas le gestionnaire d'événement de clic de serveur ou ne déclenche pas l'événement de clic de serveur une fois désactivé.

Comment gérer ce multiple problème de clic ..

J'ai utilisé le code suivant pour désactiver le bouton

<script type="text/javascript"> 
    function checkAuth(obj) 
    { 
     if(Page_ClientValidate("ValidationGroupName")) 
      obj.disabled=true;  
    } 
</script> 

     <asp:Button ID="btnSubmit" runat="server" Text="Submit" 
OnClick="btnSubmit_click" OnClientClick="checkAuth(this)" CssClass="FormButton" 
ValidationGroup="ValidationGroupName" /> 
+2

double: http://stackoverflow.com/questions/50426/preventing-accidental-double-clicking-on-a -button –

+1

Avec le code récemment ajouté, ce n'est plus un doublon (pas que vous ayez un moyen de le savoir). – jwiscarson

Répondre

5

Ne pas désactiver le bouton, il suffit d'empêcher la seconde soumission.

ce petit script fait le travail mais il suppose qu'il y a une publication à un certain moment.

var formhandler = function() { 
    var submit, isSubmit = false; 
    submit = function(){ 
       // flop and return false once by the use of operator order. 
    return isSubmit != (isSubmit = true); 
    }; 
    return { 
     submit: submit 
    }; 
}(); // <-- use direct invcation to keep the internal variables "static" 

attach par:

document.forms[0].onsubmit = formhandler.submit;  

ou

OnClientClick = "formhandler.submit()"; 
+0

Neat. Il est donc conseillé aux utilisateurs ayant des problèmes de connexion de cliquer une troisième fois ... – giraff

+0

@Caspar Kleijne: Ce code fonctionne-t-il avec 'Imagebutton' ou nécessite un bouton avec' submitBehaviour = true'. Je veux utiliser ce code avec un bouton d'image qui transfère de l'argent. Est-ce assez pour éviter plusieurs clics dans le cas où le navigateur ou le réseau se bloque, et le client continue à cliquer ?? –

+0

il fonctionne avec n'importe quel élément auquel a attaché le gestionnaire d'événement onsubmit. –

0

Tout ce que vous devez faire est d'avoir un certain javascript côté client qui désactive le bouton. Quelque chose de semblable à:

document.myform.mybutton.disabled = true; 

Si vous envelopper cela dans une fonction, et définir l'attribut onClientClick de votre bouton pour tirer cela. Dès qu'il est cliqué, il est désactivé - mais génère toujours la demande au serveur.

La raison pour laquelle l'événement na pas feu la façon dont vous suggérez ci-dessus est probablement parce que vous côté serveur désactivé (non côté client est ici)

+0

Il faut faire attention en utilisant cette technique. Par exemple, si la requête utilise AJAX et échoue en raison de problèmes de connexion, l'utilisateur se retrouve avec un site Web brisé. Et il existe d'autres causes de multi envoi (comme l'actualisation de la page cible) – CodesInChaos

+0

True - mais cette question n'a pas de tag AJAX –

+0

regardez dans la question J'ai ajouté le code que j'ai utilisé pour désactiver le bouton. – Azhar

1

Inclure un identifiant unique dans un champ <input type="hidden">. Ensuite, sur le serveur, vérifiez si la demande a déjà été traitée.

En tant qu'ID, vous pouvez générer un GUID. Ensuite, vous avez juste besoin d'une structure pour collecter des ID valides. Par exemple un dictionnaire. Ensuite, de temps en temps, vous pouvez effacer les anciens ID de la structure et, bien sûr, les supprimer quand ils sont utilisés.

+0

Comment faites-vous cela? –

+0

Je suis tenté d'aller avec celui-ci, mais pourriez-vous élaborer? –

Questions connexes