Corsi on-line

Resettare un form con jQuery

In questo brevissimo post vi segnalo un codice che reputo molto interessante. Nulla di geniale, per carità, ma sicuramente si tratta di un tip che potrebbe tornare utile a chiunque lavori abitualmente con jQuery abbia a che fare con un form HTML e desideri offrire all’utente la possibilità di resettarlo azzerando i dati inseriti dall’utente ed anche quelli eventualmente presenti di default.
L’articolo in questione è disponibile a questa pagina del sito Electrictoolbox dove potete anche vedere un esempio funzionante. Il codice, di poche righe, ve lo riporto qui sotto:

function clear_form_elements(ele) {
    $(ele).find(':input').each(function() {
        switch(this.type) {
            case 'password':
            case 'select-multiple':
            case 'select-one':
            case 'text':
            case 'textarea':
                $(this).val('');
                break;
            case 'checkbox':
            case 'radio':
                this.checked = false;
        }
    });
}

La funzione accetta come unico argomento l’identificativo del form o di un suo sotto elemento (ad esempio l’id di un DIV contenitore) andando poi ad agire su tutti gli elementi in esso contenuti.

Se volessivo azzerare l’intero form, quindi, non dovremo fare altro che specificare un id per il form:

<form id="modulo" method="post" action="pagina.php">
...
</form>

e poi inserire un un bottone (o un link) cui associare la funzione di reset in questo modo:

<input type="button" value="Resetta" onclick="clear_form_elements('modulo')"/>
Post correlati
I più letti del mese
Tematiche