Jak zresetować formularz używając jQuery z metodą .reset()

Miałem działający kod, który mógł zresetować mój formularz, gdy kliknąłem na przycisk resetowania. Jednak po tym jak mój kod staje się dłuższy, zdaję sobie sprawę, że to 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 moje jQuery:

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

Czy istnieje jakieś źródło, które powinienem zawrzeć w moich kodach, aby metoda .reset() działała? Poprzednio używałem:

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

i metoda .reset() 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?

halfer
Edytowane pytanie 5. stycznia 2014 в 9:57
Programowanie
javascript reset forms jquery
9. maja 2013 в 1:02
19 opinie

http://jsfiddle.net/8zLLn/

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

Umieściłem go w JS fiddle. Działało zgodnie z przeznaczeniem.

Tak więc, żaden z wyżej wymienionych problemów nie jest tutaj winny. Może masz problem z konfliktem ID? Czy kliknięcie jest rzeczywiście wykonywane?

Edit: (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 tego, że jest to coś z konkretnym jQuery/javascript & przypisanymi danymi formularza, musi to być coś innego. I'd zacząć bisecting kodu wokół niego i spróbować znaleźć, gdzie to's dzieje. Chodzi mi o to, żeby 'upewnić się', przypuszczam, że mógłbyś...

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

w funkcji kliknięcia i upewnić się, że jest ona skierowana do właściwego formularza...

a jeśli tak, to musi to być coś, co'nie jest tutaj wymienione.

edit część 2: Jedna rzecz, którą mógłbyś spróbować (jeśli to's nie kieruje go poprawnie) jest użycie "input:reset" zamiast tego, czego używasz... również, i'd sugestia, ponieważ to's nie jest cel, który's nieprawidłowo działa, aby dowiedzieć się, co rzeczywiste kliknięcie jest celem. Wystarczy otworzyć firebug/developer tools, cohave you, rzucić w

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

i zobacz, co wyskoczy. a potem możemy iść stamtąd.

FullOnFlatWhite
Edytowana odpowiedź 9. maja 2013 в 2:25
Komentarze (17)

Przycisk resetowania nie potrzebuje żadnego skryptu (ani nazwy czy id):

<input type="reset">

i gotowe. Ale jeśli naprawdę musisz używać skryptu, zauważ, że każda kontrolka formularza ma właściwość form, która odwołuje się do formularza, w którym się znajduje, więc możesz to zrobić:

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

Ale przycisk resetowania jest o wiele lepszym wyborem.

Komentarze (7)

Twój kod powinien działać. Upewnij się, że static/jquery-1.9.1.min.js istnieje. Możesz również spróbować powrócić do static/jquery.min.js. Jeśli to rozwiąże problem, to znaczy, że go zidentyfikowałeś.

Komentarze (2)