title: Reset to defaults of autocomplete and drop down form fields with javascript
body: <p>I have 2 forms on a page. One has id <code>dropdownmenu</code>. When one of the values is selected (on change) the value gets posted to <code>action.php</code>. The other form with id <code>search_form</code> is an autocomplete form, value is also posted to <code>action.php</code>.</p>
  
  <p>I would like to empty the form with id <code>search_form</code> when the user chooses a value with the dropdownmenu form and posts that value. And I would like to put the value of the dropdownmenu form back to <code>one</code> (default) when a user posts a value with the autocomplete form.</p>
  
  <p>The dropdownmenu form with be used to select a province and make a search based on that. The autocomplete form will be used to select a city and make a search based on that. It is not right if they both have a value. At least not visible for the user.</p>
  
  <p>My knowledge of javascript is limited. I searched everywhere and tried lots of combinations with <code>$('#search_form').reset()</code>, <code>this.reset()</code>, <code>clearForm()</code>, <code>resetForm()</code> but nothing seems to work. Below is my complete code.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  
  &lt;script src="http://code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
        $(function () {
          $('form').on('change', function (e) {
            e.preventDefault();
           $.ajax({   
           type: 'post',                                   
           url: 'action.php',                          
           data: $('form').serialize(),                       
           dataType: 'html',                 
           success: function(response){                  
              $("#responsecontainer").html(response);   
           }
          });
          });
        });
  &lt;/script&gt;
  
  
  &lt;script type="text/javascript"&gt;
     jQuery(document).ready(function(){    
        $("#search_box").autocomplete({
        source: "/includes/search.php",
        minLength: 2,
           select: function(event, ui) {
              if(ui.item){
              $(event.target).val(ui.item.value);
              }
              $.ajax({   
              type: 'post',                                    
              url: 'action.php',                            
              data: $('form').serialize(),                      
              dataType: 'html',                 
              success: function(response){  
                 $("#responsecontainer").html(response); 
              }
              });
           }
        });
     });
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;form id="dropdownmenu" action="/" method="post"&gt; 
  &lt;select class="form-control" name="provincie" id="provincie"&gt;  
      &lt;option value="one"&gt;One&lt;/option&gt;
      &lt;option value="two"&gt;Two&lt;/option&gt;
      &lt;option value="three"&gt;Three&lt;/option&gt;
      &lt;option value="four"&gt;Four&lt;/option&gt;
      &lt;option value="five"&gt;Five&lt;/option&gt;
  &lt;/select&gt;
  &lt;/form&gt;  
  
  &lt;form id="search_form" action="/" method="post"&gt;
  &lt;input id="search_box" type="text" name="search_box" /&gt;&lt;/form&gt;
  &lt;input name="submit" type="submit" value="submit"&gt;
  &lt;/form&gt;  
  
  &lt;div id="responsecontainer"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>