Resetowanie wieloetapowego formularza za pomocą jQuery

349

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.

da5id
źródło
1
@ da5id: Należy pamiętać, że moim zaakceptowanym jest również opróżnianie ukrytych elementów! Prawdopodobnie nie chcesz tego, więc po prostu dodaj: hidden do, not()jeśli twój formularz ma jakieś ukryte dane wejściowe.
Paolo Bergantino,
Dzięki Paulo, bardzo dobrze, że będę o tym pamiętać.
da5id
2
Dla każdego, kto szuka dobrej odpowiedzi, bądź ostrożny. Przyjęta odpowiedź jest na dobrej drodze, ale zawiera błędy. W chwili obecnej najczęściej głosowana odpowiedź nie rozumiała pytania. Wiele innych odpowiedzi również źle zrozumiano i mylono resetowanie z pustym / czystym .
1
Mystkine ma rację - Zarówno pytanie, jak i aktualnie zaakceptowana odpowiedź łączą się w czyszczeniu z resetowaniem - Myślę, że pytający naprawdę szukał wieloetapowego rozwiązania resetowania formularza, pomimo oryginalnego tytułu - odpowiednio go zaktualizowałem.
Yarin,
hep hep, pomimo wieku tego pytania dodałem nową odpowiedź, która faktycznie resetuje dowolne części formularza ... stackoverflow.com/questions/680241/…
kritzikratzi

Odpowiedzi:

502

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 .

Paolo Bergantino
źródło
2
To: wejście jest przydatne ... teraz wiem, że użyję. Dzięki Paolo :) +1
Alex
Bardzo fajnie, na zdrowie, ale czy to też wyczyści wartości moich przycisków? Nie można przetestować do później.
da5id
1
W tym momencie myślę, że lepiej byłoby po prostu wymienić te, które TY chcesz opróżnić, więc zamiast: wpisz w pierwszym wierszu: „: tekst,: wybierz,: radio
,:
3
Problem polega na tym, że .val('')resetuje wszystkie wartości, ''nawet jeśli te wartości są używane w przyciskach opcji i polach wyboru. Kiedy uruchamiam powyższy kod, tracę cenne informacje z formularza, a nie tylko to, co wprowadził użytkownik.
jeffery_the_wind
3
Wydaje się, że istnieje jeden mały problem z tym rozwiązaniem - dane wejściowe: e-mail - zwraca błąd: Błąd: błąd składni, nierozpoznane wyrażenie: nieobsługiwany pseudo: e
Spencer Mark
390

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.

Titi Wangsa bin Damhore
źródło
4
dzięki, to świetny sposób na wyczyszczenie formularza zawierającego: input type = "file".
neoneye
27
Myślę, że 34 osoby źle zrozumiały, o co tu chodzi. Pytający wie o resecie, formularz „zresetuje” się do wartości zapamiętanych przez jego skrypt i musi zmusić je do usunięcia.
Paolo Bergantino,
48

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');
leepowers
źródło
1
Z jakiegoś powodu nie działa to dla mnie na selectelementach. Czy może to Pan naprawić?
Pentium10
2
$ (': input,: select', '#myFormId'). removeAttr ('zaznaczone'). removeAttr ('wybrane'); powinien działać
sakhunzai
to jest poprawna odpowiedź. Jeśli użyjesz zaakceptowanej odpowiedzi, formularz zostanie wyczyszczony po przesłaniu. Jeśli jednak chcesz ponownie przesłać formularz, żadne dane pola wyboru ani przycisku opcji nie zostaną przechwycone, ponieważ atrybuty wartości zostaną usunięte.
djblue2009,
I zostały zaktualizowane moją odpowiedź do zajęcia się tym wszystkim, twoje jest głównie poprawne Pomijając fakt jQuery zdecydowanie odradza korzystania :text, :passworditp selektorów przez siebie bez określania inputudziału, w przeciwnym razie zwraca wartość *:text, która przechodzi przez każdy element w dokumencie zamiast zaledwie <input>tagów zinput:text
Paolo Bergantino
@ paolo-bergantino Twoja krytyka jest nieprawidłowa. Moje przykłady obejmują zakres elementów do sprawdzenia przy użyciu #myFormIdkontekstu przekazanego jako drugi argument do $()- to znaczy $(':input', '#context')- jest to identyczne z$('#context').filter(':input')
leepowers
16

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();
Francis Lewis
źródło
1
Ta odpowiedź jest najlepszą IMO. Czy powinno to również obejmować .prop("checked", false)? stackoverflow.com/questions/5874652/prop-vs-attr
Luke
14

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.

Cherian
źródło
$ ('# form_id'). clearForm (); jest właśnie tym, czego potrzebowałem - dzięki! „Czyści elementy formularza. Ta metoda opróżnia wszystkie dane wejściowe, hasła i elementy pola tekstowego, usuwa zaznaczenie w dowolnych elementach wyboru i odznacza wszystkie dane radiowe i pola wyboru”. (resetForm, z drugiej strony, „Resetuje formularz do pierwotnego stanu, wywołując rodzimą metodę DOM elementu formularza.”)
Tyler Rick
14

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

coś
źródło
11
jeśli jesteś fanem jQuery, można go przepisać na: $ ('frm') [0] .reset ()
dmitko
8
@dmitko Spójrz na nazwę użytkownika plakatu
Philipp M
1
Chociaż jest to dobre rozwiązanie do resetowania formularza, w rzeczywistości nie jest to rozwiązanie zadawanego pytania.
Łukasz
13

Zwyklę robię:

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

lub

$('#formId').get(0).reset()
Ricardo Bin
źródło
5

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.

alex
źródło
5

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

var validator = $("#myform").validate();
validator.resetForm();
dmitko
źródło
4

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

$(":input").not(":button, :submit, :reset, :hidden").each( function() {
    this.value = this.defaultValue;     
});
DampeS8N
źródło
z wyjątkiem tego, że nie działa w przypadku pól wyboru, przycisków opcji i zaznaczeń.
kritzikratzi
4

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/
kritzikratzi
źródło
4

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.

Ken Le
źródło
4

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;
};
Łukasz
źródło
2

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

Alberto Nunes
źródło
1
dlaczego odpowiadasz na post, na który odpowiedziano i zatwierdzono ponad 2 lata temu? Poza tym twój post jest również niskiej jakości
Rene Pot
jest to o wiele bardziej niejasne niż bezpośrednie wywoływanie form.reset (). hack nie jest potrzebny.
kritzikratzi
2

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();
});
Slawa
źródło
2

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.

James111
źródło
1

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);
kertal
źródło
1

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.

Raphie
źródło
1

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);
})
Marcelo Martins
źródło
1

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.

Karel
źródło
0

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.

Darryl Hein
źródło
0

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.

André Figueira
źródło
0
<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>
sanjay
źródło
0

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');
checkmate711
źródło
0

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","");
gizmo753
źródło
0

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

$form.find('input[type="date"]').val('');
LowGain
źródło
0

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ść.

beroso
źródło
0

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;
        }
    });
}
klucz pubowy
źródło
1
Powinieneś przenieść breakponiżej checkboxi radio. Nie ma takiej potrzeby w obecnej pozycji.
bergie3000
0

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();
    }
Marcelo Agimóvel
źródło
-1
$(this).closest('form').find('input,textarea,select').not(':image').prop('disabled', true);
mmm
źródło