Reset campi di un form con jQuery

Reset campi di un form con jQuery

 Oggi vediamo come resettare i campi e i valori di un form di contatti tramite l’utilizzo di jQuery. Un articolo molto utile da salvare nei propri preferiti!

Molto spesso capita di dover resettare i campi di un form di contatti (o altro), magari dopo l’invio di una mail oppure dopo l’inserimento dentro al nostro database. Ecco alcuni snippets di codice molto utili per resettare i valori del form in modo estremamente rapido.

 Snippets utili e funzionamento

//Imposta il valore dei campi di testo come vuoto grazie a val()
$(':text, :password, :file').val(''); // Deseleziona checkbox, radio e select

// Rimuove il check da checkboxes e option
$(':input,select option, checkbox').removeAttr('checked').removeAttr('selected');

// Seleziona il primo valore della select
$('select option:first').attr('selected',true);

Queste impostazioni di reset sono generiche ovviamente, per essere più precisi possiamo specificare anche l’id del form da resettare in questo modo:

$(':text, :password, :file', '#add-form').val('');
$(':input,select option, checkbox', '#add-form').removeAttr('checked').removeAttr('selected');
$('select option:first', '#add-form').attr('selected',true);

Ecco come funzionano i reset in questione:

Per i campi di testo,password e file usiamo val() per impostare un valore “vuoto” al campo.

Per le option e checkboxes rimuoviamo l’attributo checked (checkboxes) e selected (option).

Per le select con il selettore preleviamo la prima option e la mettiamo selezionata.

Per ESCLUDERE degli elementi del form dal reset usiamo invece la funzione .not() di jQuery che esclude un selettore.

$(':text, :password, :file', '#add-form').not("#nome").val(''); 
//reset di tutti i campi di testo del form add form AD ESCLUSIONE del campo nome

Un uso estremamente utile di questi codici è usarli in abbinamento allo stato success di ajax, ovvero, se i dati vengono passati al file di elaborazione –> resetta il campo. Basta includerli all’interno del success e il gioco è fatto! Se non sai come si usa ajax ti invito a leggere questa guida.

Come sempre vi invito a leggere i commenti al codice per maggiori precisazioni. Spero possa esservi utile, se ti è piaciuto l’articolo condividilo sui tuoi social!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Up Next:

jQuery - Creare un news ticker orizzontale o verticale

jQuery - Creare un news ticker orizzontale o verticale