Distriggers pulsante di invio sul modulo di invio

Ho scritto questo codice per disabilitare i pulsanti di invio sul mio sito Web dopo il clic:

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

Sfortunatamente, non invia il modulo. Come posso risolvere questo?

EDIT Vorrei associare il submit, non il modulo 🙂

Fatelo onSubmit() :

 $('form#id').submit(function(){ $(this).find(':input[type=submit]').prop('disabled', true); }); 

Quello che sta accadendo è che disabiliterai completamente il pulsante prima che attivi effettivamente l’evento di invio.

Probabilmente dovresti anche pensare di nominare i tuoi elementi con ID o CLASS, quindi non selezionare tutti gli input del tipo di invio sulla pagina.

Dimostrazione: http://jsfiddle.net/userdude/2hgnZ/

(Nota, utilizzo preventDefault() e return false modo che il modulo non presenti effettivamente nell’esempio, lasciare questo in uso.)

In particolare se qualcuno ha problemi con Chrome

Quello che devi fare per risolvere questo problema è usare il tag onSubmit nell’elemento per impostare il pulsante di invio su disabilitato. Ciò consentirà a Chrome di disabilitare il pulsante immediatamente dopo che è stato premuto e l’invio del modulo continuerà comunque.

per esempio

 

I controlli disabilitati non inviano i loro valori che non aiutano a sapere se l’utente ha fatto clic su Salva o Elimina.

Così memorizzo il valore del pulsante in un nascosto che viene inviato. Il nome del nascosto è lo stesso del nome del pulsante. Chiamo tutti i miei pulsanti con il nome del button .

Ad esempio

Basato su questo ho trovato qui . Basta memorizzare il pulsante cliccato in una variabile.

 $(document).ready(function(){ var submitButton$; $(document).on('click', ":submit", function (e) { // you may choose to remove disabled from all buttons first here. submitButton$ = $(this); }); $(document).on('submit', "form", function(e) { var form$ = $(this); var hiddenButton$ = $('#button', form$); if (IsNull(hiddenButton$)) { // add the hidden to the form as needed hiddenButton$ = $('') .attr({ type: 'hidden', id: 'button', name: 'button' }) .appendTo(form$); } hiddenButton$.attr('value', submitButton$.attr('value')); submitButton$.attr("disabled", "disabled"); } }); 

Ecco la mia funzione IsNull . Usa o sostituisci la tua versione per IsNull o indefinito ecc.

 function IsNull(obj) { var is; if (obj instanceof jQuery) is = obj.length <= 0; else is = obj === null || typeof obj === 'undefined' || obj == ""; return is; } 

Questo dovrebbe averne cura nella tua app.

 $(":submit").closest("form").submit(function(){ $(':submit').attr('disabled', 'disabled'); }); 

La soluzione semplice ed efficace è

 
...

Fonte: qui

Il tuo codice funziona effettivamente su FF, non funziona su Chrome.

Funziona su FF e Chrome.

 $(document).ready(function() { // Solution for disabling the submit temporarily for all the submit buttons. // Avoids double form submit. // Doing it directly on the submit click made the form not to submit in Chrome. // This works in FF and Chrome. $('form').on('submit', function(e){ //console.log('submit2', e, $(this).find('[clicked=true]')); var submit = $(this).find('[clicked=true]')[0]; if (!submit.hasAttribute('disabled')) { submit.setAttribute('disabled', true); setTimeout(function(){ submit.removeAttribute('disabled'); }, 1000); } submit.removeAttribute('clicked'); e.preventDefault(); }); $('[type=submit]').on('click touchstart', function(){ this.setAttribute('clicked', true); }); });  

Come disabilitare il pulsante di invio

basta chiamare una funzione su evento onclick e … restituire true per inviare e false per disabilitare l’invio. O chiama una funzione su window.onload come:

 window.onload = init(); 

e in init () fai qualcosa del genere:

 var theForm = document.getElementById('theForm'); theForm.onsubmit = // what ever you want to do 

Come detto prima, se si aggiunge l’attributo disabilitato sul pulsante di invio, i dati non verranno inviati.

Il trucco di @Valamas funziona, ma ho trovato una soluzione molto semplice da implementare:

 $('#yourform').submit(function(){ $('#mySubmitButton').addClass('disabled'); }); 

E definisci la class disabilitata in CSS come quella:

 .disabled{ cursor:not-allowed; } 

Questo farà lo stesso di disabled = “disabled”, ma senza le conseguenze sui dati inviati.

Quanto segue ha funzionato per me:

 var form_enabled = true; $().ready(function(){ // allow the user to submit the form only once each time the page loads $('#form_id').on('submit', function(){ if (form_enabled) { form_enabled = false; return true; } return false; }); }); 

Questo annulla l’evento di invio se l’utente tenta di inviare il modulo più volte (facendo clic su un pulsante di invio, premendo Invio, ecc.)

Ho usato blockUI per evitare incompatibilità tra browser su pulsanti disabilitati o nascosti.

http://malsup.com/jquery/block/#element

Quindi i miei pulsanti hanno una class autobutton:

  $(".autobutton").click( function(event) { var nv = $(this).html(); var nv2 = ' ' + nv; $(this).html(nv2); var form = $(this).parents('form:first'); $(this).block({ message: null }); form.submit(); }); 

Quindi una forma è così:

 
....

Un modo più semplice. Ho provato questo e ha funzionato bene per me:

 $(':input[type=submit]').prop('disabled', true);