Corsi on-line

jQuery: disabilitare un pulsante per il submit dopo l’invio di un form

In questo post voglio proporvi un’interessante applicazione del framework jQuery nella gestione dei form per l’invio di dati tramite pagine Web e Web applications; lo scopo del nostro codice sarà quello di disabilitare un pulsante “submit” dopo l’invio dei parametri richiesti per la compilazione del modulo; come al solito procederemo prima con l’inclusione della libreria JavaScript per poi definire il CSS da associare agli elementi di pagina:

.submit, p {
padding:4px;
border:1px dashed #eee;
}

Ora passeremo al nostro form, esso sarà particolarmente semplice e costituito essenzialmente da un pulsante per l’invio e da un “button”; per rendere più chiaro il funzionamento dello script verrà associata al “submit” una breve descrizione dello stato corrente relativo al pulsante:

<form action="#">
<p>Invio abilitato.</p>
<input type="submit" value="Invia"></input>
<button>Riabilita</button>
</form>

La presenza del “button” ci consentirà di riabilitare l’invio, per cui avremo la necessità di due funzioni, una per l’attivazione del “submit” e l’altra per dar luogo all’evento contrario:

$('input:submit').click(function(){
$('p').text("Invio disabilitato.").addClass('submit');
$('input:submit').attr("disabled", true);
});
$('button').click(function(){
$('p').text("Invio abilitato.").removeClass('submit');
$('input:submit').attr("disabled", false);
});

Di seguito riporto l’intero sorgente dell’applicazione che potrete utilizzare immediatamente per i vostri test:

<!DOCTYPE html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
.submit, p {
padding:4px;
border:1px dashed #eee;
}
</style>
</head>
<body>
<form action="#">
<p>Invio abilitato.</p>
<input type="submit" value="Invia"></input>
<button>Riabilita</button>
</form>
<script type="text/javascript">
$('input:submit').click(function(){
$('p').text("Invio disabilitato.").addClass('submit');
$('input:submit').attr("disabled", true);
});
$('button').click(function(){
$('p').text("Invio abilitato.").removeClass('submit');
$('input:submit').attr("disabled", false);
});
</script>
</body>
</html>

La breve descrizione contenuta all’interno dei tag “p” verrà modificata automaticamente a seconda che il pulsante per l’invio sia attivo o meno.

Post correlati
  • Manuel Di Iorio

    è ci vuole tutte ‘sto papiello per scrivere:

    document.getElementById(“pulsante”).disable = true;
    jQuery usalo per le cose per cui è necessario, se no rallenti solo il codice

  • ClaudioGarau

    In tutto “sto papiello”, come lo chami tu, c’è il CSS, l’HTML (di tutta la pagina), il codice per abilitare il pulsante, quello per disabilitarlo, nonché quello per modificare un div e il suo contenuto come esempio per la notifica dei cambiamenti di stato.
    Non limitiamoci a leggere i titoli, anche il contenuto dei post è importante 😉

I più letti del mese
Tematiche