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!
