Qual è l'approccio migliore per la disabilitazione (lato client) di un pulsante di invio?

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

Domanda

Dettagli:

  • Disabilita solo dopo che l'utente ha fatto clic sul pulsante di invio, ma prima del reinvio al server
  • Moduli Web ASP.NET (.NET 1.1)
  • Preferisco jQuery (se presente una libreria)
  • Deve essere abilitato se il modulo viene ricaricato (ad es.carta di credito fallita)

Non è una necessità che lo faccia, ma se c'è un modo semplice per farlo senza dover cambiare troppo, lo farò.(cioè.se non esiste una soluzione semplice, probabilmente non la farò, quindi non preoccuparti di scavare troppo in profondità)

È stato utile?

Soluzione

Per tutti i pulsanti di invio, tramite JQuery, sarebbe:

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

Oppure potrebbe essere più utile farlo durante l'invio del modulo:

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

Ma penso che potremmo dare una risposta migliore alla tua domanda se sapessimo qualcosa in più sul contesto.

Se si tratta di una richiesta Ajax, dovrai assicurarti di abilitare nuovamente i pulsanti di invio in caso di successo o fallimento.

Se si tratta di un invio di un modulo HTTP standard (a parte disabilitare il pulsante con javascript) e lo stai facendo per proteggerti da invii multipli dello stesso modulo, allora dovresti avere una sorta di controllo nel codice che si occupa dell'invio dati inviati, poiché la disabilitazione di un pulsante con JavaScript potrebbe non impedire invii multipli.

Altri suggerimenti

Potresti fare qualcosa del genere:

$('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;
        })
    ;
});

Vantaggi di questo:

  • Funzionerà con tutti i tuoi moduli, con tutti i metodi di invio:
    • facendo clic su un elemento di invio
    • premendo Invio o
    • chiamando form.submit() da qualche altro codice
  • Disabiliterà tutti gli elementi di invio:
    • <input type="submit"/>
    • <button type="submit"></button>
    • <input type="image" />
  • è davvero breve.

Immagino che tu non voglia che premano il pulsante di invio più di una volta durante l'elaborazione dell'invio.

Il mio approccio è stato semplicemente quello di nascondere completamente il pulsante e visualizzare invece una sorta di indicatore di stato (gif animata, ecc.).

Ecco un esempio molto artificioso (tecnicamente è un prototipo ma penso che una versione jquery sarebbe molto simile):

<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>

inJQuery:

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

La cosa da tenere presente è che non dovresti disabilitare il pulsante prima dell'invio del modulo.Se disabiliti il ​​pulsante utilizzando javascript nell'evento OnClick potresti perdere l'invio del modulo.

Quindi suggerirei di nascondere il pulsante utilizzando JavaScript posizionando un'immagine sopra di esso o spostando il pulsante fuori dall'intervallo visibile.Ciò dovrebbe consentire al modulo inviato di procedere normalmente.

Esistono tre modi per inviare un modulo che dovrebbe essere coperto.Utilizza sia i suggerimenti di David McLaughlin che quelli di Jimmy.Uno disabiliterà l'elemento del modulo del pulsante di invio mentre l'altro disabiliterà l'invio del modulo HTML di base.

Per il terzo, questi non impediranno a Javascript di eseguire un form.submit().IL OnSubmit="return false" Il metodo si applica solo quando un utente fa clic sul pulsante di invio o preme Invio in un elemento del modulo di input.Sarà necessario gestire anche lo scripting lato client.

Che ne dite di

Codice dietro:

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

Javascript:

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

Questo non risolve il problema di cosa succede se il postback scade, ma a parte questo ha funzionato per me.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top