Jak zresetować formularz za pomocą jQuery za pomocą metody .reset ()

270

Miałem działający kod, który mógł zresetować formularz po kliknięciu przycisku resetowania. Jednak po tym, jak mój kod się wydłuża, zdaję sobie sprawę, że już nie działa.

 <div id="labels">
        <table class="config">
            <thead>
                <tr>
                    <th colspan="4"; style= "padding-bottom: 20px; color:#6666FF; text-align:left; font-size: 1.5em">Control Buttons Configuration</th>
                </tr>
                <tr>
                    <th>Index</th>
                    <th>Switch</th>
                    <th>Response Number</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>

                <form id="configform" name= "input" action="#" method="get">
                <tr><td style="text-align: center">1</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" value="" id="number_one"></td>
                    <td><input style="background: white; color: black;" type="text"  id="label_one"></td>
                </tr>
                <tr>
                    <td style="text-align: center">2</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" id = "number_two" value=""></td>
                    <td><input style="background: white; color: black;" type="text"  id = "label_two"></td>
                </tr>
                <tr>
                    <td style="text-align: center">3</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" id="number_three" value=""></td>
                    <td><input style="background: white; color: black;" type="text" id="label_three"></td>
                </tr>
                <tr>
                    <td style="text-align: center">4</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" id="number_four" value=""></td>
                    <td><input style="background: white; color: black;" type="text" id="label_three"></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" id="configsubmit" value="Submit"></td>
                </tr>
                <tr>
                    <td><input type="reset" id="configreset" value="Reset"></td>
                </tr>

                </form>
            </tbody>
        </table>

    </div>

I moja jQuery:

 $('#configreset').click(function(){
            $('#configform')[0].reset();
 });

Czy jest jakieś źródło, które powinienem zawrzeć w moich kodach, aby .reset()metoda zadziałała? Wcześniej korzystałem z:

<script src="static/jquery.min.js">
</script>
<script src="static/jquery.mobile-1.2.0.min.js">
</script>

i .reset()metoda działała.

Obecnie używam

<script src="static/jquery-1.9.1.min.js"></script>      
<script src="static/jquery-migrate-1.1.1.min.js"></script>
<script src="static/jquery.mobile-1.3.1.min.js"></script>

Czy to może być jeden z powodów?

Yvonnezoe
źródło
czy możesz podać przykład niedziałania? czy którekolwiek z pól są resetowane?
Arun P. Johny
to coś takiego, ale działa dobrze tutaj jsfiddle.net/chJ8B :( prawdopodobnie z powodu innych części skryptu? ale mam tylko 1 formę
yvonnezoe
moje pytanie brzmi, czy żadne z pól nie zostało zresetowane / niektóre działają
Arun P. Johny
13
Twój kod HTML jest nieprawidłowy . Formularz nie może być dzieckiem elementu TBODY, a TR nie może być dzieckiem elementu FORM. Umieść znaczniki formularza poza tabelą (tj. Umieść tabelę w formularzu). Całkiem możliwe, że formularz jest przenoszony poza tabelę, ale formanty formularza pozostają w komórkach, więc nie są już w formularzu.
RobG
@RobG: O dobra uwaga! spróbuję tego. Dziękuję Ci! mógłbym przeoczyć ten przydatny komentarz, jeśli nie wrócę tutaj, aby pobrać link do skrzypki: s
yvonnezoe

Odpowiedzi:

463

możesz spróbować użyć łącza referencyjnego trigger ()

$('#form_id').trigger("reset");
SagarPPanchal
źródło
2
Po prostu magiczne i proste! Bardzo ceniony za dzielenie się.
Ajay Kumar,
drodzy wyborcy, czy mógłby mi Pan podać powód swoich głosów oddanych, abym mógł poprawić swoją odpowiedź.
SagarPPanchal
Używam $ ('. Profile_img_form'). Trigger ('reset'); dodałem profile_img_form o nazwie class w moim formularzu, a następnie nazwałem go nie resetuje mojej formy i zwraca komunikat o błędzie, taki jak Nieprzechwycony błąd składni: Niepoprawne wyrażenie regularne: /(^|\.)bs\.(?:.*\. kwestia. Dzięki.
Kamlesh
@Kamlesh powinno działać, stworzyłem dla ciebie demo, kliknij na jsfiddle.net/Lkt4eq9y/2
SagarPPanchal
1
Dziękuję za odpowiedź. Oszczędzone godziny Googling / SO'ing :)
Anjana Silva
276

http://jsfiddle.net/8zLLn/

  $('#configreset').click(function(){
        $('#configform')[0].reset();
  });

Umieść to w skrzypcach JS. Działa zgodnie z przeznaczeniem.

Zatem żadna z wyżej wymienionych kwestii nie jest winna. Może masz problem z identyfikatorem? Czy kliknięcie faktycznie się wykonuje?

Edycja: (ponieważ jestem smutnym workiem bez odpowiedniej umiejętności komentowania) To nie jest problem bezpośrednio z twoim kodem. Działa dobrze, gdy wyjmiesz go z kontekstu strony, której aktualnie używasz, więc zamiast być czymś związanym z konkretnymi danymi jQuery / javascript i przypisanymi formularzami, musi to być coś innego. Zaczynam dzielić kod na dwie części i próbować dowiedzieć się, co się dzieje. Chodzi mi o to, żeby „upewnić się”, przypuszczam, że mógłbyś ...

console.log($('#configform')[0]);

w funkcji kliknięcia i upewnij się, że jest ona kierowana na właściwą formę ...

a jeśli tak, to musi być coś, czego tu nie ma.

edytuj część 2: Jedną z rzeczy, które możesz wypróbować (jeśli nie jest to celowane prawidłowo), jest użycie „input: reset” zamiast tego, czego używasz ... sugeruję, ponieważ to nie cel nieprawidłowo działa, aby się dowiedzieć jakie jest rzeczywiste kliknięcie. Po prostu otwórz narzędzia firebug / deweloperów, co cię wrzuci

console.log($('#configreset'))

i zobacz, co się pojawi. i wtedy możemy zacząć stamtąd.

FullOnFlatWhite
źródło
brak konfliktu ID :( próbuję wybierać warstwę po warstwie i sprawdzać, czy kliknięcie działa
yvonnezoe,
1
hmm wydaje się, że kliknięcie nie działa! dodałem $('#ptest').html("clicked reset")w kliknięciu (funkcja () {}); gdzie powinien pokazywać „kliknięty reset”, ale się nie pojawił
yvonnezoe
mam pytanie tutaj. za każdym razem, gdy korzystam z console.log, nie mam pojęcia, gdzie go szukać. używam języka Python IDLE i terminala do uruchomienia skryptu python. javascript jest w nim. w każdym razie, kiedy używam `alert ($ ('# configform') [0]), daje mi [obiekt HTMLFormElement]
yvonnezoe
1
Spróbuj użyć alert (JSON.stringify ($ '# configform') [0])). Alert nie dba o ładne obiekty drukujące (lub mówi, co w nich jest). Po prostu informuje, że jest to obiekt.
FullOnFlatWhite
1
@DylanChensky magią jQuery jest to, że wszystko jest zbiorem (tablicą). Tak jak gdybyś używał zwykłej tablicy w jQuery [0]wybiera pierwszy element. Ale w jQuery wybiera rzeczywisty HTML elementu. Tak, [0]daje Ci html, który pozwala połączyć się z html, nie jQuery, metoda nazwie reset. Aby uzyskać więcej informacji, zobacz odpowiedź @kevin poniżej.
FullOnFlatWhite
110

Według tego posta tutaj , jQuery ma reset()metodę; ale natywny JavaScript tak. Tak więc przekonwertuj element jQuery na obiekt JavaScript, używając:

$("#formId")[0].reset()
// or
$("#formId").get(0).reset()
Kevin
źródło
1
Działa i zgadzam się, jQuery nie ma metody reset (). Możesz zobaczyć, jak to zrobić za pomocą natywnego JavaScript na stronie w3school doc: w3schools.com/jsref/met_form_reset.asp
serfer2
2
Chciałbym zauważyć, że spowoduje to jedynie zresetowanie formularza, a nie wyczyszczenie go. To znaczy, jeśli formularz wysłał wartości z żądaniem, zostaną one przywrócone.
Protektor jeden
Chciałbym dodać komentarz dotyczący symbolu zastępczego, początkowego renderowania formularza, elementy formularza mają wartości symbolu zastępczego, po tym resecie bez względu na ponownie pokazany symbol zastępczy, ale wartość staje się pusta, więc zachowaj ostrożność podczas sprawdzania poprawności formularza. Dodałem ogólną weryfikację formularza, aby sprawdzić, czy wartość symbolu zastępczego jest domyślna.
Ramratan Gupta
48

Jest to jedna z tych rzeczy, które w rzeczywistości łatwiej zrobić w waniliowym JavaScript niż jQuery. jQuery nie ma resetmetody, ale element formularza HTML ma, więc możesz zresetować wszystkie pola w formie takiej jak ta:

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

Jeśli zrobisz to za pomocą jQuery (jak widać w innych odpowiedziach tutaj:) $('#configform')[0].reset(), [0]pobierze ten sam element DOM formularza, który uzyskałbyś bezpośrednio przez document.getElementById. To drugie podejście jest zarówno bardziej wydajne, jak i prostsze (ponieważ dzięki podejściu jQuery najpierw dostajesz kolekcję, a następnie musisz pobrać z niej element, podczas gdy w waniliowym JavaScript po prostu dostajesz ten element bezpośrednio).

Nick F.
źródło
23

Przycisk resetowania nie wymaga żadnego skryptu (ani nazwy ani identyfikatora):

<input type="reset">

i jesteś skończony. Ale jeśli naprawdę musisz użyć skryptu, zauważ, że każda kontrolka formularza ma właściwość formularza, która odwołuje się do formularza, w którym się znajduje, dzięki czemu możesz:

<input type="button" onclick="this.form.reset();">

Ale przycisk resetowania jest znacznie lepszym wyborem.

RobG
źródło
masz na myśli, że wystarczy ta linia? oO więc czy mój kod HTML jest poprawny?
yvonnezoe
Zdefiniuj „nie działa”. Jaki masz błąd? Co nie działa? Przyciski resetowania są częścią formularzy HTML na zawsze, działają.
RobG
1
„nie działa” - niczego nie resetuje, nie zauważono żadnych zmian w formularzu.
yvonnezoe
1
Należy zauważyć, że „reset” nie oznacza „mój formularz został wyczyszczony”. Semantyka „resetowania” faktycznie przywraca wszystkie elementy „form” z powrotem do ich pierwotnych atrybutów „wartości”. Zdezorientowało mnie to przynajmniej przez kilka minut!
żartem
@ jocull - gdy wszystko inne zawiedzie, zawsze istnieje wersja W3C lub WHATWG standardu HTML. ;-)
RobG
21

W końcu rozwiązałem problem !! @RobG miał rację co do formtagu i tabletagu. tag powinny być umieszczone na zewnątrz tabeli. z tym,form

<td><input type="reset" id="configreset" value="Reset"></td>

działa bez potrzeby jquery lub czegokolwiek innego. wystarczy kliknąć przycisk i tadaa ~ cała forma jest resetowana;) genialne!

Yvonnezoe
źródło
3
zazwyczaj można to potwierdzić, sprawdzając kod źródłowy (nie przeglądając źródła strony, ponieważ pokaże to, co zostało wygenerowane, ale raczej używając czegoś takiego jak Narzędzia programistyczne <kbd> F12 </kbd>), który pokazuje „co przeglądarka widzi ”- w takim przypadku pokaże Ci (przynajmniej w Chrome), że formtag został automatycznie zamknięty na początku, z tbodywyłączeniem elementów wejściowych.
drzaus
16

Używam tego prostego kodu:

//reset form 
$("#mybutton").click(function(){
    $("#myform").find('input:text, input:password, input:file, select, textarea').val('');
    $("#myform").find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
});
fausto
źródło
13

Za pomocą funkcji jquery .closest (element) i .find (...) .

Zdobycie elementu nadrzędnego i poszukiwanie dziecka .

Na koniec wykonaj potrzebną funkcję.

$("#form").closest('form').find("input[type=text], textarea").val("");
aldrien.h
źródło
4
Chociaż ten blok kodu może odpowiedzieć na pytanie, zawsze powinieneś podać wyjaśnienie, dlaczego tak się dzieje.
Sascha Wolf,
1
$("#form").find("input[type=text], textarea").val("");zrobiłem w ten sposób
Bira
11

Pierwszy wiersz zresetuje dane wejściowe formularza

$('form#myform').trigger("reset"); //Line1
$('form#myform select').trigger("change"); //Line2

Drugi zresetuje select2

Opcjonalnie: możesz z tego korzystać, jeśli masz różne typy zarejestrowane z różnymi zdarzeniami

$('form#myform select, form input[type=checkbox]').trigger("change"); //Line2
Ali Jamal
źródło
5

Szybki reset pól formularza jest możliwy dzięki tej funkcji resetowania jQuery.

kiedy otrzymasz odpowiedź powodzenia, uruchom poniżej kodu.

$(selector)[0].reset();

Kiran Kanzar
źródło
4

Możesz po prostu dodać typ wejścia = reset z id = resetform w ten sposób

<html>
<form>
<input type = 'reset' id = 'resetform' value = 'reset'/>
<!--Other items in the form can be placed here-->
</form>
</html>

następnie za pomocą jquery po prostu użyj funkcji .click () na elemencie o id = resetform w następujący sposób

<script> 
$('#resetform').click();
</script>

i formularz resetuje się Uwaga: Możesz także ukryć przycisk resetowania za pomocą id = resetform przy użyciu css

<style>
#resetform
{
display:none;
}
</style>
Chuksy
źródło
Nie zapomnij go ukryć ... aby był bardziej nowoczesny. <input type = 'reset' id = 'resetform' value = 'reset' / style = 'display: none;'>
mangas
3

Oto proste rozwiązanie z Jquery. Działa globalnie. Spójrz na kod.

$('document').on("click", ".clear", function(){
   $(this).closest('form').trigger("reset");
})

Dodaj wyraźną klasę do przycisku w każdej formie, którą musisz zresetować. Na przykład:

<button class="button clear" type="reset">Clear</button>
Ijharul Islam
źródło
3

jQuery nie ma reset()metody; ale natywny JavaScript tak. Tak więc przekonwertuj element jQuery na obiekt JavaScript, używając:

$("#formId")[0].reset();

$("#formId").get(0).reset();

Możemy po prostu użyć kodu JavaScript

document.getElementById("formid").reset();
Vivek Pawar
źródło
2
<button type="reset">Reset</reset>

Najprostszy sposób, w jaki mogę myśleć, jest solidny. Umieść w znaczniku formularza.

luminancedesign
źródło
1

Możesz użyć następujących.

@using (Html.BeginForm("MyAction", "MyController", new { area = "MyArea" }, FormMethod.Post, new { @class = "" }))
{
<div class="col-md-6">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
        @Html.LabelFor(m => m.MyData, new { @class = "col-form-label" })
    </div>
    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
        @Html.TextBoxFor(m => m.MyData, new { @class = "form-control" })
    </div>
</div>
<div class="col-md-6">
    <div class="">
        <button class="btn btn-primary" type="submit">Send</button>
        <button class="btn btn-danger" type="reset"> Clear</button>
    </div>
</div>
}

Następnie wyczyść formularz:

    $('.btn:reset').click(function (ev) {
        ev.preventDefault();
        $(this).closest('form').find("input").each(function(i, v) {
            $(this).val("");
        });
    });
RainyTears
źródło
Wydaje się, że jest tutaj dużo kodu specyficznego dla frameworka. Zalecam unikanie takich rzeczy podczas odpowiadania na pytania dotyczące SO, ponieważ w pytaniu nie określono, że używają one dowolnego frameworku oprócz jQuery
Lazerbeak12345
0

Twój kod powinien działać. Upewnij się, że static/jquery-1.9.1.min.jsistnieje. Możesz także spróbować przywrócić static/jquery.min.js. Jeśli to rozwiązuje problem, oznacza to, że problem został zidentyfikowany.

ic3b3rg
źródło
Jedynym innym problemem, jaki mogę wymyślić, jest to, że masz inną formę o tym samym id ( configform). Powinieneś przeprowadzić dochodzenie za pomocą konsoli. Najpierw spróbować $. Jeśli używasz Chrome, wpisanie $w konsoli aktywuje listę kontekstową, jeśli jQuery jest załadowane. Jeśli wpiszesz $i naciśniesz Return, funkcja oceni, czy jQuery jest załadowane. Następna próba $("#configform"). Kliknij wynik prawym przyciskiem myszy i wybierz Reveal in Elements panel.
ic3b3rg
dziękuję :) ale nie mam chromu. czy to ten sam sposób, aby to zrobić za pomocą Firebuga? (Mam go zainstalowany, ale nigdy go wcześniej nie korzystałem)
yvonnezoe