title: Clear only specific fields in HTML form when submitting
body: <p>I have the following HTML form code:</p>
  
  <pre><code>&lt;div data-role="popup" id="-add" data-theme="c" class="ui-corner-all" data-dismissible="false" data-overlay-theme="a" style="min-width:550px;"&gt;
      &lt;div data-role="content"&gt; &lt;a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" style="position:absolute;top:-20px;right:-15px;"&gt;Delete&lt;/a&gt;
  
          &lt;form id="item-form" action="#" formaction="process" data-ajax="false"&gt;
              &lt;input type="hidden" name="type" value="hidden1" /&gt;
              &lt;input type="hidden" name="how" value="hidden2" /&gt;
              &lt;input type="hidden" name="loc" value="hidden3" /&gt;
              &lt;input type="hidden" name="itemtype" value="hidden4" /&gt;
              &lt;div align="left"&gt;
                   &lt;h3&gt; Add&lt;/h3&gt;
  
              &lt;/div&gt;
              &lt;div class="popup-hrule"&gt;&lt;/div&gt;
              &lt;div class="ui-grid-a ui-responsive"&gt;
                  &lt;div class="ui-block-a"&gt;
                      &lt;label for="location_name"&gt;Name&lt;/label&gt;
                      &lt;input type="text" name="location_name" id="location_name" value=""&gt;
                  &lt;/div&gt;
                  &lt;div class="ui-block-b" data-schema="types"&gt;
                      &lt;label for="type_name"&gt;Type&lt;/label&gt;
                      &lt;select name="type_name" id="type_name"&gt;
                          &lt;option data-item=".textarea:name; .value:id; .repeat:true"&gt;&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;div class="ui-block-a"&gt;
                      &lt;label for="address"&gt;Address&lt;/label&gt;
                      &lt;input type="text" name="address" id="address" value=""&gt;
                  &lt;/div&gt;
                  &lt;div class="ui-block-b"&gt;
                      &lt;label for="city"&gt;City&lt;/label&gt;
                      &lt;input type="text" name="city" id="city" value=""&gt;
                  &lt;/div&gt;
                  &lt;div class="ui-block-a"&gt;
                      &lt;label for="state"&gt;State&lt;/label&gt;
                      &lt;input type="text" name="state" id="state" value=""&gt;
                  &lt;/div&gt;
                  &lt;div class="ui-block-b"&gt;
                      &lt;label for="zip"&gt;Postal&lt;/label&gt;
                      &lt;input type="number" name="zip" id="zip" value=""&gt;
                  &lt;/div&gt;
                  &lt;div class="ui-block-a"&gt;
                      &lt;label for="_lat"&gt;Latitude&lt;/label&gt;
                      &lt;input type="number" name="_lat" id="_lat" value=""&gt;
                  &lt;/div&gt;
                  &lt;div class="ui-block-b"&gt;
                      &lt;label for="_lon"&gt;Longitude&lt;/label&gt;
                      &lt;input type="number" name="_lon" id="_lon" value=""&gt;
                  &lt;/div&gt;
              &lt;/div&gt; &lt;a data-role="button" data-inline="true" onclick="$(this).closest('[data-role=popup]').popup('close');"&gt;Cancel&lt;/a&gt;
   &lt;a data-role="button" data-inline="true" data-theme="a" onclick="$(this).closest('form').submit();$(this).closest('form').find('input').val('');$(this).closest('[data-role=popup]').popup('close')"&gt;Add&lt;/a&gt;
  
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Since this is an ADD form I would like to close the form and clear all the fields except for the hidden ones at the top which are flags that tell me what I have to do with the data. When I execute the code it clears all the data in the form including the hidden fields so the second time I can't add a new record. </p>
  
  <p>A best approach for me would be to close the form completely so I don't have to erase the fields in the form which are going to get new data when I try to open it again.</p>