Quelle est la meilleure approche pour désactiver (côté client) un bouton de soumission ?

StackOverflow https://stackoverflow.com/questions/46079

Question

Détails:

  • Désactiver uniquement après que l'utilisateur a cliqué sur le bouton Soumettre, mais avant la publication sur le serveur
  • Formulaires Web ASP.NET (.NET 1.1)
  • Préférez jQuery (le cas échéant une bibliothèque)
  • Doit être activé si le formulaire est rechargé (c.-à-d.la carte de crédit a échoué)

Ce n'est pas une nécessité pour moi de faire cela, mais s'il existe un moyen simple de le faire sans trop changer, je le ferai.(c'est à dire.s'il n'y a pas de solution simple, je ne le ferai probablement pas, alors ne vous inquiétez pas de creuser trop profondément)

Était-ce utile?

La solution

Pour tous les boutons de soumission, via JQuery, ce serait :

$('input[type=submit]').click(function() { this.disabled = true; });

Ou il pourrait être plus utile de le faire lors de la soumission du formulaire :

$('form').submit(function() {
    $('input[type=submit]', this).attr("disabled","disabled");
});

Mais je pense que nous pourrions mieux répondre à votre question si nous en connaissions un peu plus sur le contexte.

S'il s'agit d'une requête ajax, vous devrez vous assurer d'activer à nouveau les boutons de soumission en cas de succès ou d'échec.

S'il s'agit d'une soumission de formulaire HTTP standard (en plus de désactiver le bouton avec javascript) et que vous faites cela pour vous protéger contre plusieurs soumissions du même formulaire, vous devez alors avoir une sorte de contrôle dans le code qui traite du données soumises, car la désactivation d'un bouton avec javascript peut ne pas empêcher les soumissions multiples.

Autres conseils

Vous pourriez faire quelque chose comme ceci :

$('form').submit(function() {
    $(this)
        .find(":submit,:image")             // get all the submit buttons
        .attr({ disabled : 'disabled' })    // disable them
        .end()                              // go back to this form
        .submit(function() {                // change the onsubmit to always reject.
            return false;
        })
    ;
});

Avantages de ceci :

  • Il fonctionnera avec tous vos formulaires, avec toutes les méthodes de soumission :
    • cliquer sur un élément de soumission
    • en appuyant sur Entrée, ou
    • appel form.submit() à partir d'un autre code
  • Cela désactivera tous les éléments de soumission :
    • <input type="submit"/>
    • <button type="submit"></button>
    • <input type="image" />
  • c'est vraiment court.

Je suppose que vous ne voulez pas qu'ils appuient sur le bouton de soumission plus d'une fois pendant le traitement de la soumission.

Mon approche a consisté simplement à masquer entièrement le bouton et à afficher une sorte d'indicateur d'état (gif animé, etc.).

Voici un exemple très artificiel (c'est techniquement en prototype mais je pense qu'une version jquery serait très similaire) :

<html>
    <head>
        <script type="text/javascript" src="include/js/prototype.js"></script>

        <script type="text/javascript">
            function handleSubmit()
            {
                $('submit').hide();
                $('progressWheel').show();
                return true;
            }
        </script>
    </head>
    <body>
        <img src="include/images/progress-wheel_lg.gif" id="progressWheel" style="display:none;"/>
        <input type="submit" name="submit" id="submit" value="Submit" onclick="handleSubmit();"/>
    </body>
</html>

en JQuery :

$('#SubmitButtonID').click(function() { this.disabled = true; });

Une chose à savoir est que vous ne devez pas désactiver le bouton avant que le formulaire ne soit soumis.Si vous désactivez le bouton à l'aide de javascript dans l'événement OnClick, vous risquez de perdre la soumission du formulaire.

Je vous suggère donc de masquer le bouton à l'aide de javascript en plaçant une image au-dessus ou en déplaçant le bouton hors de la plage visible.Cela devrait permettre à la soumission du formulaire de se dérouler normalement.

Il existe trois façons de soumettre un formulaire qui doivent être couvertes.Utilisez les suggestions de David McLaughlin et de Jimmy.L’un désactivera l’élément de formulaire du bouton de soumission tandis que l’autre désactivera la soumission du formulaire HTML de base.

Pour le troisième, ceux-ci n'empêcheront pas Javascript d'effectuer un form.submit().Le OnSubmit="return false" La méthode ne s'applique que lorsqu'un utilisateur clique sur le bouton Soumettre ou appuie sur Entrée dans un élément du formulaire de saisie.Les scripts côté client devront également être gérés.

Que diriez-vous

Code derrière:

btnContinue3.Attributes.Item("onclick") = "disableSubmit()"

Javascript:

function disableSubmit() {
    document.getElementById('btnContinue3').onclick = function() { 
        alert('Please only click once on the submit button!'); return false;
    };
}

Cela ne résout pas le problème de ce qui se passe si la publication expire, mais à part cela, cela a fonctionné pour moi.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top