Ripristino di un modulo in più fasi con jQuery

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

<input type="reset" class="button standard" value="Clear" />

Il problema è che la forma è del tipo multi-stage, quindi se un utente compila uno stage e poi ritorna più tardi, i valori "ricordati" per i vari campi non verranno ripristinati quando si fa clic sul pulsante Cancella.

Sto pensando che collegare una funzione jQuery per scorrere su tutti i campi e cancellarli "manualmente" farebbe il trucco. Sto già usando jQuery all'interno del modulo, ma mi sto solo aggiornando e quindi non sono sicuro di come procedere, oltre a fare riferimento individualmente a ciascun campo per ID, che non sembra molto efficiente.

TIA per qualsiasi aiuto.

aggiornato a marzo 2012.

Quindi, due anni dopo aver risposto inizialmente a questa domanda, torno a vedere che si è praticamente trasformato in un grande casino. Sento che è ora che torni ad esso e renda la mia risposta veramente corretta poiché è la più votata + accettata.

Per la cronaca, la risposta di Titi è errata in quanto non è ciò che il poster originale ha richiesto - è corretto che è possibile ripristinare un modulo utilizzando il metodo reset () nativo, ma questa domanda sta cercando di cancellare un modulo da ricordato valori che rimarrebbero nel modulo se lo ripristinassi in questo modo. Ecco perché è necessario un ripristino "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.

Mio risposta originale era questa:

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

Il che potrebbe funzionare in molti casi, incluso per l'OP, ma come sottolineato nei commenti e in altre risposte, cancellerà gli elementi radio / checkbox da qualsiasi attributo di valore.

Un più corretto risposta (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

Utilizzando il :text,:radio ecc selettori per sé è considerato cattiva pratica da jQuery come finiscono per valutare a *:textche lo rende vuole molto più tempo del dovuto. Preferisco l'approccio della whitelist e vorrei averlo usato nella mia risposta originale. In ogni caso, specificando la inputparte del selettore, più la cache dell'elemento del modulo, questo dovrebbe renderlo la risposta con le migliori prestazioni qui.

Questa risposta potrebbe avere ancora alcuni difetti se il valore predefinito delle persone per gli elementi selezionati non è un'opzione che ha un valore vuoto, ma è certamente generico come sarà e dovrebbe essere gestito caso per caso .

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

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

l'impostazione myinput.val('')potrebbe non emulare "reset" al 100% se si dispone di un input come questo:

<input name="percent" value="50"/>

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

C'è un grosso problema con la risposta accettata da Paolo. Prendere in considerazione:

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

La .val('')linea cancellerà anche tutti quelli valueassegnati a caselle di controllo e pulsanti di opzione. Quindi se (come me) fai qualcosa del genere:

<input type="checkbox" name="list[]" value="one" />
<input type="checkbox" name="list[]" value="two" checked="checked" />
<input type="checkbox" name="list[]" value="three" />

L'uso della risposta accettata trasformerà i tuoi input in:

<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />

Oops - Stavo usando quel valore!

Ecco una versione modificata che manterrà i valori della casella di controllo e della 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');

Plugin jQuery

Ho creato un plug-in 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();

Cancellare le forme è un po 'complicato e non così semplice come sembra.

Suggerire di utilizzare il plug-in del modulo jQuery e utilizzare la sua funzionalità clearForm o resetForm . Si occupa della maggior parte dei casi d'angolo.

document.getElementById ( 'frm'). reset ()

Di solito faccio:

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

o

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

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 caselle di controllo / pulsanti di opzione, dovrai modificarlo per includerli e impostarli .attr({'checked': false});

modifica La risposta di Paolo è più concisa. La mia risposta è più prolissa perché non sapevo del :inputselettore, né pensavo semplicemente di rimuovere l'attributo controllato.

Prendi in considerazione l'utilizzo del plug -in di convalida : è fantastico! E la reimpostazione del modulo è semplice:

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

Trovo che funzioni bene.

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

praticamente nessuno delle soluzioni fornite mi rende felice. come sottolineato da alcune persone, svuotano il modulo invece di ripristinarlo.

tuttavia, ci sono alcune proprietà javascript che aiutano:

• defaultValue per i campi di testo
• defaultControllato per caselle di controllo e pulsanti di opzione
• defaultSelezionato per selezionare le opzioni

questi memorizzano il valore di un campo al momento del caricamento della 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 aver bisogno di un trattamento speciale ma la stessa idea dovrebbe funzionare.
• gli elementi devono essere referenziati direttamente. cioè $( "#container" ).resetValue()non funzionerà. usa sempre $( "#container :input" )invece.
• come menzionato sopra, ecco una demo: http://jsfiddle.net/kritzikratzi/N8fEF/1/

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

Nel normale JavaScript, questo è semplice come:

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

Cerco di ricordare sempre che mentre usiamo jQuery per migliorare e velocizzare la nostra codifica, a volte non è in realtà più veloce. In questi casi, è spesso meglio usare un altro metodo.

Ho fatto una leggera variazione della bella soluzione di Francis Lewis . Quello che la sua soluzione non fa è impostare il menu a discesa su bianco. (Penso che quando molte persone vogliono "cancellare", probabilmente vogliono rendere vuoti tutti i valori.) 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;
};

Di solito aggiungo un pulsante di ripristino nascosto al modulo. quando serve solo: $ ('# reset'). click ();

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

$('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 jQuery Trigger eventcosì:

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

Ciò ripristinerà le caselle di controllo, i pulsanti di opzione, le caselle di testo, ecc ... In sostanza, trasforma il modulo allo stato predefinito. Basta inserire l' #ID, Class, elementinterno del jQueryselettore.

questo ha funzionato per me, la risposta di pyrotex non ha ripristinato i campi selezionati, ha preso la sua, qui 'la mia modifica:

// 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 Paolo Bergantino che è grandiosa ma con alcune modifiche ... In particolare per lavorare con il nome del modulo invece di 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, uno potrebbe fare

<span class="button" onclick="jqResetForm('formName')">Reset</span>

Come vedi, funziona con qualsiasi modulo e poiché sto usando uno stile CSS per creare il pulsante, la pagina non si aggiorna quando si fa clic. Ancora una volta grazie Paolo per il tuo contributo. L'unico problema è se ho valori predefiniti nel modulo.

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

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

Sono solo un intermediario in PHP e sono un po 'pigro per immergermi in una nuova lingua come JQuery, ma la seguente non è una soluzione semplice ed elegante?

<input name="Submit1" type="submit" value="Get free quote" />
<input name="submitreset" type="submit" value="Reset" />

Non riesco 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--"; }

Ridefinisci i tuoi valori a qualunque valore predefinito.

Un metodo che ho usato su un modulo abbastanza grande (oltre 50 campi) è stato semplicemente ricaricare il modulo con AJAX, fondamentalmente effettuando una chiamata al server e restituendo i campi con i loro valori predefiniti. Ciò è molto più semplice rispetto al tentativo di afferrare ciascun campo con JS e 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 ho dovuto 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 per farlo è con un reset falso, cioè usare un link e un pulsante di reset.

Aggiungi solo alcuni CSS per nascondere il tuo vero pulsante di ripristino.

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

E poi sul tuo link aggiungi come segue

<a href="javascript:{}" onclick="reset.click()">Reset form</a>

<input type="reset" name="reset" id="reset" /><!--This input button is hidden-->

Spero che sia di aiuto! UN.

<script type="text/javascript">
$("#edit_name").val('default value');
$("#edit_url").val('default value');
$("#edit_priority").val('default value');
$("#edit_description").val('default value');
$("#edit_icon_url option:selected").removeAttr("selected");
</script>

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');

Avevo 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 riceve i valori da una sessione. Per qualche motivo il seguente non ha funzionato per me:

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

Se dopo ho inserito un avviso, ho visto i valori rimossi correttamente ma successivamente sono stati sostituiti nuovamente. Ancora non so come o perché, ma la seguente riga ha fatto il trucco per me:

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

La risposta di Paolo non tiene conto dei selettori di date, aggiungilo in:

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

Ho apportato un piccolo miglioramento 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 set di campi, ad esempio:

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

Inoltre, vengono mantenuti i valori predefiniti degli input.

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;
        }
    });
}

A completamento della risposta accettata, se si utilizza il plug-in SELECT2, è necessario richiamare lo script select2 per apportare modifiche in tutti i campi select2:

function resetForm(formId){
        $('#'+formId).find('input:text, input:password, input:file, select, select2, textarea').val('');
        $('#'+formId).find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
        $('.select2').select2();
    }

$(this).closest('form').find('input,textarea,select').not(':image').prop('disabled', true);