La désactivation d'un bouton HTML, en attendant une suite

Lorsque je clique sur un bouton de soumission sur mon formulaire HTML, la fonction de la touche est appelée, et elle fait son travail. Après avoir terminé le travail d'un mail de notification est envoyé qui demande beaucoup trop de temps. Après qu'un message de confirmation est affiché sur la même page HTML (sans l'aide d'Ajax; c'est à dire, la page est actualisée).

Je veux éviter de laisser l'utilisateur à cliquer sur le bouton soumettre plusieurs fois dans la confusion pendant la période d'attente de l'envoi de mails. Donc, je pense que je devrais désactiver le bouton après qu'il est pressé une fois.

Comment puis-je faire cela?

Pouvez-vous s'il vous plaît suggérer toute autre technique pour atteindre cet objectif sans désactiver le bouton?

OriginalL'auteur Robin Agrahari | 2010-01-14

  1. 2

    Comment puis-je faire cela?

    Vous pouvez prendre un coup d'oeil dans le code javascript de cette page:

    http://www.codinghorror.com/blog/archives/000096.html

    <input type="Button" onClick="this.value='Submitting..';this.disabled=true;" value="Submit">

    Pouvez-vous s'il vous plaît suggérer toute autre technique pour atteindre cet objectif sans désactiver le bouton?

    Montrer une longue panneau:

    "... Votre demande est en cours de traitement, veuillez patienter..."

    http://online.vodafone.co.uk/en_GB/assets/static/ipi_please_wait.gif http://online.vodafone.co.uk/en_GB/assets/static/ipi_please_wait.gif

    Votre exemple ne fonctionnera pas si l'utilisateur appuie sur la touche entrée sur une seule ligne de texte de la boîte. Vous devez utiliser l'événement onsubmit dans la balise form.
    Nice: <form action="file" method="post" onsubmit="this.submit_button.disabled = true;"> stackoverflow.com/questions/2067042/...

    OriginalL'auteur OscarRyz

  2. 11

    Simplement:

    <form action="file" method="post" onsubmit="this.submit_button.disabled = true;">
    <input name="submit_button" type="submit" value="Submit" />
</form>

    Vous pouvez l'obtenir sans désactivation du bouton à l'aide d'un nonce, mais il est un peu plus complexe. Essentiellement, lorsque l'utilisateur demande la page qui contient le formulaire qui sera soumis, affecter un id unique à qui demande de l'utilisateur (le stocker quelque part sur le serveur, et assurez-vous qu'il est soumis avec le formulaire). Lorsque le formulaire est soumis ensuite, recherchez l'id unique pour s'assurer qu'il n'est pas en cours ou déjà traitées, et puis si c'est OK pour continuer, marque l'unique id "dans le processus", traiter le formulaire, puis le marquer comme étant traitée. Si lors de la vérification initiale et la page est en cours ou déjà traitée, vous aurez besoin de prendre les mesures nécessaires (les rediriger vers une page de confirmation s'il a été traité avec succès, ou de revenir à la forme si elle n'a pas été traitée avec succès).

    +1: Pour mentionner un serveur côté technique
    La protection du client peut être travaillé autour de en soumettant le formulaire avec la touche [entrée] à partir d'une entrée par exemple.
    sera tiré, même lorsque la touche entrée est utilisée. Vous pensez peut-être de <input type="submit" onclick="...">
    Oui désolé, j'ai lu trop rapidement, vous êtes en droit

    OriginalL'auteur Langdon

  3. 1

    Si vous désactivez un bouton à droite avant de le soumettre, alors le parent formulaire pas être soumis. Vous avez besoin de désactiver le bouton après soumettre. Meilleure façon d'utiliser le JavaScript est setTimeout() de la fonction pour cela.

    <input type="submit" id="foo" onclick="setTimeout('document.getElementById(\'' + this.id + '\').disabled=true;', 50);">

    50ms est assez abordable pour donner la forme de la chance d'obtenir soumis.

    Pour améliorer l'expérience de l'utilisateur, vous pouvez bien sûr ajouter un message ou d'un chargement de l'image dynamiquement lors du même événement onclick comme déjà suggéré par d'autres.

    OriginalL'auteur BalusC

  4. 0

    En supposant que vous ne voulez pas désactiver le bouton, vous pouvez toujours pop up un modal sur la page. Cela empêchera l'utilisateur de l'interaction avec la page. Vous pouvez jeter une sorte de chargement spinner là avec un message que l'envoi est en cours.

    OriginalL'auteur Parrots

  5. 0

    Je ne comprends pas pourquoi c'est un problème, comme vous le faites régulièrement présenter, l'utilisateur doit voir une page blanche pendant que vous traitez dans le back-end.. Mais dans le cas si vous souhaitez désactiver le bouton, voici le code à utiliser sur le bouton

    onclick="this.disabled=disabled"
    Cela va bloquer la soumission du formulaire parent.

    OriginalL'auteur Teja Kantamneni

  6. 0

    Vous pourriez avoir le bouton sera désactivé, mais semblent encore active à l'utilisateur. Dans la fonction qui est appelé après que le bouton est frappé de la première fois, la première chose qu'il fait définir une variable globale comme disableButton de vrai. Lorsque l'utilisateur appuie sur le bouton, que d'aller à une fonction appelée quelque chose comme checkSubmitStatus. Si disableButton = true, return false. if disableButton = false, déclencher la fonction envoyer.

    Vous avez toujours désactivé le bouton, mais vos utilisateurs peuvent appuyer sur loin pas au courant.

    OriginalL'auteur Anthony

  7. 0

    Je ne suis pas de soumettre quoi que ce soit, mais Google Chrome 31 ne met pas à jour le bouton rechercher lors du calcul, alors je suis venu avec cette solution de contournement:

    <style>
.btnMenu{width:70px; font-size:12px}
.btnMenu:disabled{background-color:grey}
</style>
<input type="button" class="btnMenu" value="Total" onmousedown="b=this; b.disabled=true; b.v=b.value; b.value='Calculating...'; setTimeout('updateTotals(); b.value=b.v; b.disabled=false', 100)"/>

    OriginalL'auteur Cees Timmerman