title: How to reset a form using jQuery with .reset() method
body: <p>I had working code that could reset my form when I click on a reset button. However after my code is getting longer, I realize that it doesn't work anymore.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;labels&quot;&gt;
    &lt;table class=&quot;config&quot;&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th colspan=&quot;4&quot;; style= &quot;padding-bottom: 20px; color:#6666FF; text-align:left; font-size: 1.5em&quot;&gt;Control Buttons Configuration&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th&gt;Index&lt;/th&gt;
          &lt;th&gt;Switch&lt;/th&gt;
          &lt;th&gt;Response Number&lt;/th&gt;
          &lt;th&gt;Description&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;            
        &lt;form id=&quot;configform&quot; name= &quot;input&quot; action=&quot;#&quot; method=&quot;get&quot;&gt;
          &lt;tr&gt;
            &lt;td style=&quot;text-align: center&quot;&gt;1&lt;/td&gt;
            &lt;td&gt;&lt;img src= &quot;static/switch.png&quot; height=&quot;100px&quot; width=&quot;108px&quot;&gt;&lt;/td&gt;
            &lt;td id=&quot;small&quot;&gt;&lt;input style=&quot;background: white; color: black;&quot; type=&quot;text&quot; value=&quot;&quot; id=&quot;number_one&quot;&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input style=&quot;background: white; color: black;&quot; type=&quot;text&quot;  id=&quot;label_one&quot;&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td style=&quot;text-align: center&quot;&gt;2&lt;/td&gt;
            &lt;td&gt;&lt;img src= &quot;static/switch.png&quot; height=&quot;100px&quot; width=&quot;108px&quot;&gt;&lt;/td&gt;
            &lt;td id=&quot;small&quot;&gt;&lt;input style=&quot;background: white; color: black;&quot; type=&quot;text&quot; id = &quot;number_two&quot; value=&quot;&quot;&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input style=&quot;background: white; color: black;&quot; type=&quot;text&quot;  id = &quot;label_two&quot;&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td style=&quot;text-align: center&quot;&gt;3&lt;/td&gt;
            &lt;td&gt;&lt;img src= &quot;static/switch.png&quot; height=&quot;100px&quot; width=&quot;108px&quot;&gt;&lt;/td&gt;
            &lt;td id=&quot;small&quot;&gt;&lt;input style=&quot;background: white; color: black;&quot; type=&quot;text&quot; id=&quot;number_three&quot; value=&quot;&quot;&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input style=&quot;background: white; color: black;&quot; type=&quot;text&quot; id=&quot;label_three&quot;&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td style=&quot;text-align: center&quot;&gt;4&lt;/td&gt;
            &lt;td&gt;&lt;img src= &quot;static/switch.png&quot; height=&quot;100px&quot; width=&quot;108px&quot;&gt;&lt;/td&gt;
            &lt;td id=&quot;small&quot;&gt;&lt;input style=&quot;background: white; color: black;&quot; type=&quot;text&quot; id=&quot;number_four&quot; value=&quot;&quot;&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input style=&quot;background: white; color: black;&quot; type=&quot;text&quot; id=&quot;label_three&quot;&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type=&quot;submit&quot; id=&quot;configsubmit&quot; value=&quot;Submit&quot;&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;input type=&quot;reset&quot; id=&quot;configreset&quot; value=&quot;Reset&quot;&gt;&lt;/td&gt;
          &lt;/tr&gt;
                    
        &lt;/form&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
              
  &lt;/div&gt;
  </code></pre>
  <p>And my jQuery:</p>
  <pre class="lang-js prettyprint-override"><code>$('#configreset').click(function(){
      $('#configform')[0].reset();
  });
  </code></pre>
  <p>Is there some source that I should include in my codes in order for the <code>.reset()</code> method to work? Previously I was using:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;script src=&quot;static/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;static/jquery.mobile-1.2.0.min.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>and the <code>.reset()</code> method was working.</p>
  <p>Currently I'm using</p>
  <pre class="lang-html prettyprint-override"><code>&lt;script src=&quot;static/jquery-1.9.1.min.js&quot;&gt;&lt;/script&gt;      
  &lt;script src=&quot;static/jquery-migrate-1.1.1.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;static/jquery.mobile-1.3.1.min.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>Could it possibly be one of the reason?</p>