title: How to call reset on variety of inputs from OUTSIDE the form
body: <p>I have a form with various kinds of inputs, text, drop downs, radial buttons, sliders, and checkboxes. My "Reset" button is outside of the form (above the form). Is there a way to click the button and set all of the inputs back to default? </p>
  
  <p>I have a Twitter Bootstrap accordion, with the reset button on the accordion header. The form is below inside of the accordion. I want to be able to clear the form whether the accordion is expanded or collapsed. </p>
  
  <p>Example: </p>
  
  <p>Accordion heading (Expanded)              Reset</p>
  
  <p>input fields </p>
  
  <p>Accordion heading (collapsed)             Reset</p>
  
  <p>My reset is in my html like so: </p>
  
  <pre><code>&lt;a id="icon-Reset" href="#form" class="btn-mini" type="reset"&gt;&lt;i class="icon-refresh"  title="Reset" &gt;&lt;/i&gt;&lt;/a&gt; 
  </code></pre>
  
  <p>and I was trying to do this in my javascript file:</p>
  
  <pre><code>#icon-Reset.click(function(){
  $('#form').get(0).reset();
  });
  </code></pre>
  
  <p>but I cannot get anything to work.</p>
  
  <p>To be more clear, here is the top of the html that has the above html line in it: </p>
  
  <pre><code>&lt;div id="side-bar-container"&gt;
  &lt;div id="sideBar"&gt;
      &lt;div class="accordion" id="mainAccordion"&gt;
          &lt;div class="accordion-group"&gt;
              &lt;div class="accordion-heading"&gt;
                  &lt;a class="accordion-toggle" data-toggle="collapse"
                      data-parent="#mainAccordion" data-target="#collapseOne"&gt; &lt;i
                      class="icon-chevron"&gt;&lt;/i&gt;Accordion Heading1 
                  &lt;/a&gt;
                  &lt;a id="icon-Reset" href="#form" class="btn-mini" type="reset"&gt;&lt;i class="icon-refresh"  title="Reset" &gt;&lt;/i&gt;&lt;/a&gt; 
              &lt;/div&gt;
              &lt;div id="collapse" class="accordion-body collapse in"&gt;
                  &lt;div class="accordion-inner scrollable"&gt;
                      &lt;div id="Accordion1"&gt;
                          &lt;form id="form"class="form-search form-horizontal"&gt;
                              &lt;fieldset&gt;
  </code></pre>
  
  <p>I am VERY new to Javascript, HTML, etc, so please be detailed...Thanks!!</p>