Reimpostazione di un modulo a più stadi con jQuery

Ho un modulo con un pulsante di reset standard codificato in questo modo:

 

Il problema è che la forma è di tipo multistadio, quindi se un utente riempie uno stage e poi ritorna in un secondo momento, i valori “ricordati” per i vari campi non verranno ripristinati quando si fa clic sul pulsante Cancella.

Sto pensando che associare una funzione jQuery per eseguire il loop su tutti i campi e cancellarli manualmente ‘farebbe il trucco. Sto già usando jQuery nel modulo, ma sto solo iniziando a lavorare e quindi non sono sicuro di come procedere, a parte il riferimento individuale a ciascun campo tramite ID, che non sembra molto efficiente.

TIA per qualsiasi aiuto.

aggiornato a marzo 2012.

Quindi, due anni dopo aver originariamente risposto a questa domanda, torno a vedere che è praticamente diventato un gran casino. Sento che è giunto il momento di tornare su di esso e di rendere la mia risposta veramente corretta poiché è la più upvoted + accettata.

Per la cronaca, la risposta di Titi è errata in quanto non è ciò che il poster originale chiedeva: è corretto che è ansible reimpostare un modulo usando il metodo nativo reset (), ma questa domanda sta provando a cancellare un modulo dalla memoria valori che rimarrebbero nella forma se lo ripristini in questo modo. Questo è il motivo per cui è necessario un reset “manuale”. Presumo che la maggior parte delle persone sia finita in questa domanda da una ricerca su Google e stia veramente cercando il metodo reset (), ma non funziona per il caso specifico di cui parla l’OP.

La mia risposta originale era questa:

 // not correct, use answer below $(':input','#myform') .not(':button, :submit, :reset, :hidden') .val('') .removeAttr('checked') .removeAttr('selected'); 

Che potrebbe funzionare per molti casi, incluso per l’OP, ma come indicato nei commenti e in altre risposte, cancellerà gli elementi radio / checkbox da qualsiasi valore.

Una risposta più corretta (ma non perfetta) è:

 function resetForm($form) { $form.find('input:text, input:password, input:file, select, textarea').val(''); $form.find('input:radio, input:checkbox') .removeAttr('checked').removeAttr('selected'); } // to call, use: resetForm($('#myform')); // by id, recommended resetForm($('form[name=myName]')); // by name 

Usare j :text :radio , ecc. Selettori è considerato una pratica scorretta da parte di jQuery mentre finiscono per valutare il *:text che richiede molto più tempo di quanto dovrebbe. Preferisco l’approccio della lista bianca e vorrei averlo usato nella mia risposta originale. In ogni caso, specificando la parte di input del selettore, oltre alla cache dell’elemento del modulo, questo dovrebbe rendere la risposta migliore qui.

Questa risposta potrebbe ancora presentare alcuni difetti se l’impostazione predefinita delle persone per gli elementi selezionati non è un’opzione che ha un valore vuoto, ma è certamente così generica come si otterrà e questo dovrebbe essere gestito caso per caso .

Da http://groups.google.com/group/jquery-dev/msg/2e0b7435a864beea :

 $('#myform')[0].reset(); 

setting myinput.val('') potrebbe non emulare “reset” 100% se hai un input come questo:

  

Ad esempio, chiamare myinput.val('') su un input con un valore predefinito di 50 lo imposterà su una stringa vuota, mentre chiamare myform.reset() lo ripristinerebbe al suo valore iniziale di 50.

C’è un grosso problema con la risposta accettata di Paolo. Prendere in considerazione:

 $(':input','#myform') .not(':button, :submit, :reset, :hidden') .val('') .removeAttr('checked') .removeAttr('selected'); 

La linea .val('') cancellerà anche qualsiasi value assegnato alle caselle di controllo e ai pulsanti di opzione. Quindi se (come me) fai qualcosa del genere:

    

L’utilizzo della risposta accettata trasformsrà i tuoi input in:

    

Oops – Stavo usando quel valore!

Ecco una versione modificata che manterrà i tuoi valori di checkbox e radio:

 // Use a whitelist of fields to minimize unintended side effects. $('INPUT:text, INPUT:password, INPUT:file, SELECT, TEXTAREA', '#myFormId').val(''); // De-select any checkboxes, radios and drop-down menus $('INPUT:checkbox, INPUT:radio', '#myFormId').removeAttr('checked').removeAttr('selected'); 

Cancellare le forms è un po ‘complicato e non così semplice come sembra.

Suggerisco di utilizzare il plug-in del modulo jQuery e di usare la sua funzione clearForm o resetForm . Si prende cura della maggior parte dei casi d’angolo.

document.getElementById ( ‘frm’). reset ()

jQuery Plugin

Ho creato un plugin jQuery in modo da poterlo utilizzare facilmente ovunque ne abbia bisogno:

 jQuery.fn.clear = function() { var $form = $(this); $form.find('input:text, input:password, input:file, textarea').val(''); $form.find('select option:selected').removeAttr('selected'); $form.find('input:checkbox, input:radio').removeAttr('checked'); return this; }; 

Quindi ora posso usarlo chiamando:

 $('#my-form').clear(); 

Di solito faccio:

 $('#formDiv form').get(0).reset() 

o

 $('#formId').get(0).reset() 

Prendi in considerazione l’utilizzo del plug -in di convalida : è fantastico! E la forma di ripristino è semplice:

 var validator = $("#myform").validate(); validator.resetForm(); 

Ecco qualcosa per iniziare

 $('form') // match your correct form .find('input[type!=submit], input[type!=reset]') // don't reset submit or reset .val(''); // set their value to blank 

Naturalmente, se hai checkbox / radio button, dovrai modificarlo per includerli e impostare .attr({'checked': false});

modifica la risposta di Paolo è più concisa. La mia risposta è più verbosa perché non sapevo sul :input selettore di :input , né ho pensato semplicemente a rimuovere l’attributo selezionato.

Trovo che questo funziona bene.

 $(":input").not(":button, :submit, :reset, :hidden").each( function() { this.value = this.defaultValue; }); 

in fondo nessuna delle soluzioni fornite mi rende felice. come indicato da alcune persone, svuotano il modulo invece di resettarlo.

tuttavia, ci sono alcune proprietà javascript che aiutano:

  • defaultValue per i campi di testo
  • defaultChecked per checkbox e pulsanti radio
  • defaultSelected per selezionare le opzioni

questi memorizzano il valore che un campo aveva quando veniva caricata la pagina.

scrivere un plugin jQuery è ora banale: (per gli impazienti … ecco una demo http://jsfiddle.net/kritzikratzi/N8fEF/1/ )

plugin-code

 (function( $ ){ $.fn.resetValue = function() { return this.each(function() { var $this = $(this); var node = this.nodeName.toLowerCase(); var type = $this.attr( "type" ); if( node == "input" && ( type == "text" || type == "password" ) ){ this.value = this.defaultValue; } else if( node == "input" && ( type == "radio" || type == "checkbox" ) ){ this.checked = this.defaultChecked; } else if( node == "input" && ( type == "button" || type == "submit" || type="reset" ) ){ // we really don't care } else if( node == "select" ){ this.selectedIndex = $this.find( "option" ).filter( function(){ return this.defaultSelected == true; } ).index(); } else if( node == "textarea" ){ this.value = this.defaultValue; } // not good... unknown element, guess around else if( this.hasOwnProperty( "defaultValue" ) ){ this.value = this.defaultValue; } else{ // panic! must be some html5 crazyness } }); } } )(jQuery); 

uso

 // reset a bunch of fields $( "#input1, #input2, #select1" ).resetValue(); // reset a group of radio buttons $( "input[name=myRadioGroup]" ).resetValue(); // reset all fields in a certain container $( "#someContainer :input" ).resetValue(); // reset all fields $( ":input" ).resetValue(); // note that resetting all fields is better with the javascript-builtin command: $( "#myForm" ).get(0).reset(); 

alcune note …

  • non ho esaminato i nuovi elementi del modulo html5, alcuni potrebbero richiedere un trattamento speciale ma la stessa idea dovrebbe funzionare.
  • gli elementi devono essere referenziati direttamente cioè $( "#container" ).resetValue() non funzionerà. usa sempre $( "#container :input" ) .
  • come detto sopra, ecco una demo: http://jsfiddle.net/kritzikratzi/N8fEF/1/

Potresti scoprire che questo è più facile da risolvere senza jQuery.

Nel normale JavaScript, questo è semplice come:

 document.getElementById('frmitem').reset(); 

Cerco sempre di ricordare che mentre usiamo jQuery per migliorare e velocizzare la codifica, a volte non è più veloce. In questi casi, è spesso preferibile utilizzare un altro metodo.

Ho fatto una leggera variazione della bella soluzione di Francis Lewis . Ciò che la sua soluzione non fa è impostare il menu a tendina su bianco. (Penso che quando molte persone vogliono “cancellare”, probabilmente vogliono rendere tutti i valori vuoti). Questo lo fa con .find('select').prop("selectedIndex", -1) .

 $.fn.clear = function() { $(this).find('input') .filter(':text, :password, :file').val('') .end() .filter(':checkbox, :radio') .removeAttr('checked') .end() .end() .find('textarea').val('') .end() .find('select').prop("selectedIndex", -1) .find('option:selected').removeAttr('selected') ; return this; }; 

Normalmente aggiungo un pulsante di reset nascosto al modulo. quando necessario solo: $ (‘# reset’). click ();

Modifica della risposta più votata per la situazione $(document).ready() :

 $('button[type="reset"]').click(function(e) { $form = $(this.form); $form.find('input:text, input:password, input:file, select, textarea').val(''); $form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected'); e.preventDefault(); }); 

Usa semplicemente l’ jQuery Trigger event modo:

 $('form').trigger("reset"); 

Questo reimposta caselle di controllo, pulsanti di opzione, caselle di testo, ecc. In pratica, trasforma il tuo modulo nel suo stato predefinito. Inserisci semplicemente l’ #ID, Class, element all’interno del selettore jQuery .

questo ha funzionato per me, la risposta a pirotex non ha resettato i campi selezionati, ha preso il suo, qui ‘il mio edit:

 // Use a whitelist of fields to minimize unintended side effects. $(':text, :password, :file', '#myFormId').val(''); // De-select any checkboxes, radios and drop-down menus $(':input,select option', '#myFormId').removeAttr('checked').removeAttr('selected'); //this is for selecting the first entry of the select $('select option:first', '#myFormId').attr('selected',true); 

Sto usando la soluzione di Paolo Bergantino che è grande ma con poche modifiche … In particolare per lavorare con il nome del modulo invece un id.

Per esempio:

 function jqResetForm(form){ $(':input','form[name='+form+']') .not(':button, :submit, :reset, :hidden') .val('') .removeAttr('checked') .removeAttr('selected'); } 

Ora, quando voglio usarlo, potrebbe farlo

 Reset 

Come vedi, questo funziona con qualsiasi forma, e poiché sto usando uno stile css per creare il pulsante la pagina non si aggiornerà quando si fa clic. Ancora una volta grazie Paolo per il tuo contributo. L’unico problema è se ho valori di default nel modulo.

Ho usato la soluzione qui sotto e ha funzionato per me (mescolando il javascript tradizionale con jQuery)

 $("#myformId").submit(function() { comand="window.document."+$(this).attr('name')+".reset()"; setTimeout("eval(comando)",4000); }) 

Sono solo un intermedio in PHP, e un po ‘pigro per tuffarmi in un nuovo linguaggio come JQuery, ma non è la seguente una soluzione semplice ed elegante?

   

Non riesci a vedere un motivo per cui non hai due pulsanti di invio, solo con scopi diversi. Quindi semplicemente:

 if ($_POST['submitreset']=="Reset") { $_source = "--Choose language from--"; $_target = "--Choose language to--"; } 

Basta ridefinire i valori su qualsiasi valore predefinito.

Un metodo che ho usato su una forma abbastanza grande (oltre 50 campi) era semplicemente ricaricare il modulo con AJAX, fondamentalmente facendo una chiamata al server e restituendo semplicemente i campi con i loro valori predefiniti. Questo risultato è molto più semplice che cercare di afferrare ogni campo con JS e quindi impostarlo sul valore predefinito. Mi ha anche permesso di mantenere i valori predefiniti in un unico posto: il codice del server. Su questo sito, c’erano anche alcune impostazioni predefinite diverse a seconda delle impostazioni dell’account e quindi non dovevo preoccuparmi di inviarle a JS. L’unico piccolo problema che dovevo affrontare erano alcuni campi suggeriti che richiedevano l’inizializzazione dopo la chiamata AJAX, ma non un grosso problema.

Tutte queste risposte sono buone, ma il modo più semplice di farlo è con un falso reset, cioè si usa un link e un pulsante di reset.

Basta aggiungere un po ‘di CSS per hide il tuo vero pulsante di reset.

 input[type=reset] { visibility:hidden; height:0; padding:0;} 

E poi sul tuo link aggiungi come segue

 Reset form  

Spero che questo ti aiuti! UN.

  

Qui con l’aggiornamento per le caselle di controllo e seleziona:

 $('#frm').find('input:text, input:password, input:file, textarea').val(''); $('#frm').find('input:radio, input:checkbox').attr("checked",false).checkboxradio("refresh"); $('#frm').find('select').val('').selectmenu('refresh'); 

Stavo avendo lo stesso problema e il posto di Paolo mi ha aiutato, ma avevo bisogno di aggiustare una cosa. Il mio modulo con id advancedindexsearch conteneva solo campi di input e ottiene i valori da una sessione. Per qualche ragione il seguente non ha funzionato per me:

 $("#advancedindexsearch").find("input:text").val(""); 

Se metto un avviso dopo questo, ho visto i valori dove sono stati rimossi correttamente, ma in seguito li hanno rimpiazzati. Non so ancora come o perché, ma la linea seguente ha fatto il trucco per me:

 $("#advancedindexsearch").find("input:text").attr("value",""); 

La risposta di Paolo non tiene conto dei raccoglitori di date, aggiungi questo in:

 $form.find('input[type="date"]').val(''); 

Ho apportato alcuni miglioramenti alla risposta originale di Paolo Bergantino

 function resetFormInputs(context) { jQuery(':input', context) .removeAttr('checked') .removeAttr('selected') .not(':button, :submit, :reset, :hidden') .each(function(){ jQuery(this).val(jQuery(this).prop('defautValue')); }); } 

In questo modo, posso passare qualsiasi elemento di contesto alla funzione. Sono in grado di ripristinare l’intero modulo o solo un determinato insieme di campi, ad esempio:

 resetFormInputs('#form-id'); // entire form resetFormInputs('.personal-info'); // only the personal info field set 

Inoltre, i valori predefiniti degli input vengono mantenuti.

ecco la mia soluzione, che funziona anche con i nuovi tipi di input html5:

 /** * removes all value attributes from input/textarea/select-fields the element with the given css-selector * @param {string} ele css-selector of the element | #form_5 */ function clear_form_elements(ele) { $(ele).find(':input').each(function() { switch (this.type) { case 'checkbox': case 'radio': this.checked = false; default: $(this).val(''); break; } }); } 
 $(this).closest('form').find('input,textarea,select').not(':image').prop('disabled', true);