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

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?

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

$('#form_id').trigger("reset");

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.

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

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

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.

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!

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

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

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

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

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>

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>

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

<button type="reset">Reset</reset>

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

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

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.