Как да нулирате формуляр, като използвате jQuery с метода .reset()

Имах работещ код, който можеше да нулира формуляра ми, когато щракне върху бутон за нулиране. След като обаче кодът ми стана по-дълъг, осъзнах, че вече не работи.

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

И моето jQuery:

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

Има ли някакъв източник, който трябва да включа в кодовете си, за да работи методът .reset()? Преди това използвах:

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

и методът .reset() работеше.

В момента използвам

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

Възможно ли е това да е една от причините?

halfer
Редактиран въпрос Направете януари 2014 в 9:57
Програмиране
javascript reset forms jquery
Направете май 2013 в 1:02
11 изгледи

http://jsfiddle.net/8zLLn/

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

Поставете го в JS скрипец. Работи, както е предвидено.

Така че нито един от гореспоменатите проблеми не е виновен за това. Може би имате проблем с противоречащи си идентификатори? Действително ли се изпълнява кликването?

Редактиране: (защото съм тъжен чувал без подходяща възможност за коментиране) Това не е проблем директно с твоя код. Работи добре, когато го извадиш от контекста на страницата, която използваш в момента, така че вместо да е нещо с конкретния jQuery/javascript & приписани данни на формата, трябва да е нещо друго. Бих започнал да разчленявам кода около него и да се опитам да намеря къде се случва това. Искам да кажа, че за да се уверите, може да...

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

във функцията за щракване и да се уверите, че тя е насочена към правилната форма...

и ако е така, то трябва да е нещо, което не е посочено тук.

редактиране част 2: Едно нещо, което може да опитате (ако тя'е не го насочва правилно) е да използвате "input:reset" вместо това, което използвате... също, аз'бих предложил, тъй като тя'е не целта, която'е неправилно работи, за да разберете това, което действителната клик е насочена. Просто отворете firebug/developer tools, или каквото и да е друго, хвърлете

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

и вижте какво ще се появи. и тогава можем да продължим оттам.

FullOnFlatWhite
Редактиран отговор Направете май 2013 в 2:25
Коментари (17)

Бутонът за нулиране не се нуждае от никакъв скрипт (нито от име или id):

<input type="reset">

и сте готови. Но ако наистина трябва да използвате скрипт, имайте предвид, че всеки контрол на форма има свойство form, което препраща към формата, в която се намира, така че можете да направите:

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

Но бутонът за нулиране е много по-добър избор.

Коментари (7)

Кодът ви трябва да работи. Уверете се, че съществува static/jquery-1.9.1.min.js. Също така можете да опитате да се върнете към static/jquery.min.js. Ако това отстрани проблема, значи сте установили проблема.

Коментари (2)