Resetowanie wieloetapowego formularza za pomocą jQuery

Mam formularz ze standardowym przyciskiem resetowania zakodowanym w następujący sposób:

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

Problem w tym, że wspomniana forma ma charakter wieloetapowy, więc jeśli użytkownik wypełni etap, a następnie wróci później, zapamiętane wartości dla różnych pól nie zostaną zresetowane po kliknięciu przycisku Wyczyść.

Myślę, że dołączenie funkcji jQuery w celu zapętlenia wszystkich pól i wyczyszczenia ich „ręcznie” załatwi sprawę. Już korzystam z jQuery w formularzu, ale dopiero zaczynam działać, więc nie jestem pewien, jak sobie z tym poradzić, oprócz indywidualnego odwoływania się do każdego pola według identyfikatora, co nie wydaje się zbyt wydajne.

TIA za wszelką pomoc.

zaktualizowany w marcu 2012 r.

Dwa lata po tym, jak pierwotnie odpowiedziałem na to pytanie, wróciłem, aby przekonać się, że właściwie zmieniło się to w wielki bałagan. Wydaje mi się, że nadszedł czas, aby do niego wrócić i naprawdę poprawić swoją odpowiedź, ponieważ jest ona najbardziej pozytywnie oceniana + zaakceptowana.

Dla przypomnienia, odpowiedź Titi jest błędna, ponieważ nie jest to prośba oryginalnego plakatu - prawdą jest, że możliwe jest zresetowanie formularza przy użyciu natywnej metody reset (), ale to pytanie próbuje usunąć formularz z zapamiętanego wartości, które pozostałyby w formularzu, jeśli zresetujesz go w ten sposób. Dlatego potrzebny jest reset „ręczny”. Zakładam, że większość osób znalazła się w tym pytaniu z wyszukiwarki Google i naprawdę szuka metody reset (), ale to nie działa w konkretnym przypadku, o którym mówi OP.

Moja pierwotna odpowiedź brzmiała:

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

Co może działać w wielu przypadkach, w tym dla PO, ale jak wskazano w komentarzach i innych odpowiedziach, wyczyści elementy radia / pola wyboru z wszelkich atrybutów wartości.

Bardziej poprawna odpowiedź (ale nie doskonała) to:

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

Używanie :text, :radioitd selektorów przez siebie jest uważane za złą praktyką przez jQuery, ponieważ kończy się oceny na *:textco sprawia, że znacznie dłużej niż powinno. Wolę podejście z białej listy i żałuję, że nie użyłem go w mojej oryginalnej odpowiedzi. W każdym razie, podając inputczęść selektora oraz pamięć podręczną elementu formularza, powinno to uczynić ją najlepszą odpowiedzią tutaj.

Ta odpowiedź może nadal mieć pewne wady, jeśli domyślne ustawienie wybranych elementów przez ludzi nie jest opcją, która ma pustą wartość, ale z pewnością jest tak ogólne, jak się da, i należy to rozpatrywać indywidualnie .

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

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

ustawienie myinput.val('')może nie emulować „resetu” w 100%, jeśli masz takie dane wejściowe:

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

Np. Wywołanie myinput.val('')wejścia o wartości domyślnej 50 ustawiłoby go na pusty ciąg, podczas gdy wywołanie myform.reset()zresetowałoby go do wartości początkowej 50.

Jest duży problem z zaakceptowaną odpowiedzią Paolo. Rozważać:

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

.val('')Linia będzie również wyczyścić każdy valuejest przypisany do wyboru i przycisków radiowych. Więc jeśli (jak ja) robisz coś takiego:

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

Użycie zaakceptowanej odpowiedzi przekształci twoje dane wejściowe w:

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

Ups - używałem tej wartości!

Oto zmodyfikowana wersja, która zachowa twoje pole wyboru i wartości radiowe:

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

jQuery Plugin

Stworzyłem wtyczkę jQuery, dzięki czemu mogę jej używać wszędzie tam, gdzie jej potrzebuję:

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

Teraz mogę go użyć, dzwoniąc:

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

Usuwanie formularzy jest nieco trudne i nie tak proste, jak się wydaje.

Zaproponuj użycie wtyczki jQuery i skorzystaj z jej funkcji clearForm lub resetForm . Zajmuje się większością skrzynek narożnych.

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

Zwyklę robię:

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

lub

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

Oto coś na początek

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

Oczywiście, jeśli masz pola wyboru / przyciski opcji, musisz to zmodyfikować, aby również je uwzględnić i ustawić .attr({'checked': false});

edytuj Odpowiedź Paolo jest bardziej zwięzła. Moja odpowiedź jest trudniejsza, ponieważ nie wiedziałem o :inputselektorze ani nie myślałem o zwykłym usunięciu zaznaczonego atrybutu.

Zastanów się nad użyciem wtyczki walidacyjnej - to świetnie! A formularz resetowania jest prosty:

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

Uważam, że to działa dobrze.

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

w zasadzie żaden z dostarczonych rozwiązań mnie nie cieszy. jak wskazało kilka osób, opróżniają formularz zamiast go resetować.

istnieje jednak kilka właściwości javascript, które pomagają:

• defaultValue dla pól tekstowych
• default Zaznaczone dla pól wyboru i przycisków opcji
• defaultSelected dla wybranych opcji

przechowują one wartość, jaką miało pole podczas wczytywania strony.

pisanie wtyczki jQuery jest teraz banalne: (dla niecierpliwych ... oto demo http://jsfiddle.net/kritzikratzi/N8fEF/1/ )

kod wtyczki

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

stosowanie

// 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(); 

kilka notatek ...

• nie zajrzałem do nowych elementów formularza HTML5, niektóre mogą wymagać specjalnego traktowania, ale ten sam pomysł powinien zadziałać.
• do elementów należy się bezpośrednio odwoływać. tzn. $( "#container" ).resetValue()nie będzie działać. zawsze używaj $( "#container :input" )zamiast tego.
• jak wspomniano powyżej, tutaj jest demo: http://jsfiddle.net/kritzikratzi/N8fEF/1/

Może się okazać, że jest to łatwiejsze do rozwiązania bez jQuery.

W zwykłym JavaScript jest to tak proste, jak:

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

Staram się zawsze pamiętać, że chociaż używamy jQuery do ulepszania i przyspieszania naszego kodowania, czasami tak naprawdę nie jest to szybsze. W takich przypadkach często lepiej jest użyć innej metody.

Dokonałem niewielkiej zmiany fajnego rozwiązania Francisa Lewisa . To, czego nie robi jego rozwiązanie, to ustawienie rozwijanych opcji na puste. (Myślę, że kiedy większość ludzi chce „wyczyścić”, prawdopodobnie chcą, aby wszystkie wartości były puste.) Ta robi to .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;
};

Zwykle dodaję do formularza ukryty przycisk resetowania. w razie potrzeby po prostu: $ ('# reset'). click ();

Modyfikacja najczęściej głosowanej odpowiedzi na $(document).ready()sytuację:

$('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();
});

Po prostu użyj tego, jQuery Trigger eventaby:

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

Spowoduje to zresetowanie pól wyboru, przycisków radiowych, pól tekstowych itp. Zasadniczo zmienia on formularz w stan domyślny. Po prostu włóż #ID, Class, elementwnętrze jQueryselektora.

to zadziałało dla mnie, odpowiedź pirrotex nie zresetowała wybranych pól, wzięła jego, tutaj 'moją edycję:

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

Korzystam z rozwiązania Paolo Bergantino, które jest świetne, ale z kilkoma poprawkami ... W szczególności do pracy z nazwą formularza zamiast id.

Na przykład:

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

Teraz, gdy chcę tego użyć, mogę zrobić

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

Jak widać, działa to w dowolnej formie, a ponieważ używam stylu css do utworzenia przycisku, strona nie odświeży się po kliknięciu. Jeszcze raz dziękuję Paolo za Twój wkład. Jedynym problemem jest to, czy mam wartości domyślne w formularzu.

Użyłem poniższego rozwiązania i zadziałało dla mnie (mieszanie tradycyjnego javascript z jQuery)

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

Jestem tylko pośrednikiem w PHP i jestem trochę leniwy, aby zanurzyć się w nowym języku, takim jak JQuery, ale czy poniższe postępowanie nie jest prostym i eleganckim rozwiązaniem?

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

Nie widzę powodu, dla którego nie masz dwóch przycisków przesyłania, tylko w różnych celach. Następnie po prostu:

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

Po prostu redefiniujesz swoje wartości z powrotem tak, jak powinny być domyślne.

Metodą, której użyłem w dość dużej formie (ponad 50 pól) było po prostu ponowne załadowanie formularza za pomocą AJAX, w zasadzie oddzwanianie do serwera i po prostu zwracanie pól z ich domyślnymi wartościami. Jest to o wiele łatwiejsze niż próba złapania każdego pola za pomocą JS, a następnie ustawienia go na wartość domyślną. Pozwoliło mi to również zachować wartości domyślne w jednym miejscu - w kodzie serwera. Na tej stronie były też różne ustawienia domyślne w zależności od ustawień konta i dlatego nie musiałem się martwić o przesłanie ich do JS. Jedynym małym problemem, z którym musiałem sobie poradzić, były pola sugerujące, które wymagały inicjalizacji po wywołaniu AJAX, ale nic wielkiego.

Wszystkie te odpowiedzi są dobre, ale absolutnie najłatwiej to zrobić za pomocą fałszywego resetu, tzn. Używasz linku i przycisku resetowania.

Wystarczy dodać CSS, aby ukryć swój prawdziwy przycisk resetowania.

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

A następnie do linku dodajesz w następujący sposób

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

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

Mam nadzieję że to pomoże! ZA.

<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>

Tutaj z odświeżeniem pól wyboru i zaznaczeniem:

$('#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');

Miałem ten sam problem i post Paolo pomógł mi, ale musiałem dostosować jedną rzecz. Mój formularz o id advancedindexsearch zawierał tylko pola wejściowe i pobierał wartości z sesji. Z jakiegoś powodu następujące działania nie działały dla mnie:

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

Jeśli po tym wprowadzę alert, zobaczyłem wartości, które zostały poprawnie usunięte, ale potem zostały ponownie wymienione. Nadal nie wiem jak i dlaczego, ale następujący wiersz zrobił dla mnie lewę:

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

Odpowiedź Paolo nie uwzględnia wyboru dat, dodaj to w:

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

Poprawiłem nieco pierwotną odpowiedź 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'));
    });
}

W ten sposób mogę przekazać dowolny element kontekstu do funkcji. Jestem w stanie zresetować cały formularz lub tylko pewien zestaw pól, na przykład:

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

Ponadto zachowane są domyślne wartości wejść.

oto moje rozwiązanie, które działa również z nowymi typami danych wejściowych 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;
        }
    });
}

Uzupełniając zaakceptowaną odpowiedź, jeśli używasz wtyczki SELECT2, musisz przywołać skrypt select2, aby wprowadzić zmiany, wszystkie pola 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);