Pulsante Disabilita dopo invio con jQuery

Question

So che ci sono molte domande a riguardo, ma ho provato diverse soluzioni e nulla funziona.

Nel mio Django app Ho una forma:

<form method='post'> 
    <button type='submit'>Send</button> 
</form> 

ho wan't per disabilitare il pulsante una volta che l'utente ha inviato il modulo. L'utilizzo di altre domande, ho provato diverse cose, come:

<button type='submit' onclick="this.disabled=true">Send</button> 

Quando scatto, il pulsante è disattivato ... ma la forma non viene presentata. E per ogni tentativo ho avuto lo stesso problema: o il pulsante è disabilitato o il modulo viene inviato. Non riesco a trovare come fare entrambi ...

Sto usando Chrome. Qualche idea sul perché ho questo problema? Grazie per l'aiuto.

Answer 1

Prova questo:

$('form').submit(function() { 
    $(this).find("button[type='submit']").prop('disabled',true); 
}); 

Answer 2

prova, in questo modo,

<input type="submit" value="Send" onclick="javascript=this.disabled = true; form.submit();"> 

Answer 3

Si potrebbe disabilitare su di submit evento del form genitore:

$("form").on("submit", function() { 
    $(this).find(":submit").prop("disabled", true); 
}); 

Assicurarsi di eseguire questo codice solo dopo che è stato caricato il numero HTMLFormElement, altrimenti non vi sarà associato. Per garantire che il legame si svolge, fuoco questa via all'interno di un blocco document-ready:

// When the document is ready, call setup 
$(document).ready(setup); 

function setup() { 
    $("form").on("submit", function() { 
     $(this).find(":submit").prop("disabled", true); 
    }); 
} 

Answer 4

Qualcosa di simile potrebbe funzionare.

<button id="btnSubmit" type='submit'> Send </button> 

<script> 
    $("#btnSubmit").on("click", function(e){ 
      e.PreventDefault(); 
      $(this).closest("form")[0].submit(); 
      $(this).prop('disabled',true) 
    }); 
</script> 

Answer 5

Che ne dici di questo?

onclick="this.style.visibility='hidden';" 

Direi, invece di disattivarlo, nasconderlo.

Se si vuole andare con disabled

onclick="this.style.disabled='true';" 

Answer 6

mia variante, pulsante, nessun disabile diretta ma solo vidible nascosto disabilitare:

<input type="submit" name="namebutton" value="Nahrát obrázek" onclick="this.style.visibility='hidden';" ondblclick="this.style.visibility='hidden';"/> 

Answer 7

mi piace questo meglio:

<script> 
    var submit = false; 
    $('form').submit(function() { 
     if (submit) { return false; } 
     else { submit = true;} 
    }); 
</script> 

in questo modo impedisce anche il tasto invio di inviare più di una volta

Answer 8

Sto utilizzando Chrome. Qualche idea sul perché ho questo problema?

Bene, la prima volta mi sono occupato di questo, ho risolto in questo modo:

function blockButtons() { 
    $('button:submit').click(function(){ 
    $('button:submit').attr("disabled", true); 
    }); 
} 

questo ha funzionato perfettamente, ma ... in Mozilla Firefox.Google Chrome non ha presentato, così ho cambiato in questo:

function blockButtons() { 
    $('button:submit').click(function(){ 
     var form = $(this).parents('form:first'); 
    $('button:submit').attr("disabled", true); 
    $('button:submit').css('opacity', 0.5); 
    form.submit(); 
    }); 
} 

questo ha lavorato sia in Mozilla Firefox, tuttavia, dopo che alcuni dei nostri utenti che utilizzano le vecchie versioni di IE sperimentato difficoltà di avere due sottomette. Cioè, quello avviato dal javascript, e quello dal browser che ignora il fatto di onclick e che semplicemente lo inoltra comunque. Questo può essere risolto da e.preventDefault, credo.

Answer 9

Mi piace, non devo attraversare DOM. funzione Indossare una funzione setTimeout, questo permette far presentare e dopo pulsante Disabilita, anche se setTimeout è 0

$(document).ready(function() { 
$("#btnSubmit").click(function() { 
    setTimeout(function() { disableButton(); }, 0); 
}); 

function disableButton() { 
    $("#btnSubmit").prop('disabled', true); 
} 
}); 

Answer 10

Se non si desidera che un elemento sia doppio clic, utilizzare .one()

<button id="submit" type="submit">Send</button> 
<script> 
$(function() { 
$("#submit").one("click", function() { 
//enter your submit code 
}); 
}); 

.one()

Answer 11

Got un problema su Chrome, non era inviare il modulo. Ho provato un po 'di codice diverso, questo è stato ciò che ha funzionato meglio per me (e si vede meglio IMO):

$('#form_id').submit(function() { 
    $("input[type='submit']", this) 
     .val("Please Wait...") 
     .attr('disabled', 'disabled'); 
    return true; 
    }); 

Sostituire form_id con l'id del modulo. Classi lavoro troppo, naturalmente: $('.form_class')

Fonte: JavaScript Coder

Answer 12

Si può fare qualcosa di simile. Funziona bene con me.

<form method='post' onSubmit='disableFunction()'> 
// your code here 
</form> 

Poi nello script, aggiungere questo

<script> 
function disableFunction() { 
    $('#btn_submit').prop('disabled', true); 
} 
</script>