title: How to show/hide a form on button click in jquery?
body: <p>I have two forms in my page. I hide the form 2 using HTML inline style.</p>
  
  <pre><code>        &lt;form id="productionForm" name="productionForm" method="POST" style="display:none;"&gt;
  </code></pre>
  
  <p>I have input button on form 1.</p>
  
  <pre><code>    &lt;input id="buttonProductionSummary"  class="buttonProductionSummary" type="submit" value="Submit" /&gt;
  </code></pre>
  
  <p>I have JQuery code to load the form 2 on button click of form 1. My JQuery code is as follows.</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
      $(document).ready(function(){
  
          $("#buttonProductionSummary").click(function() {
              $("#productionForm").show();
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>When i click the button in the form one, the page get reloaded again, so the form 2 appears and disappers again. How to can i make the form 2 to appear when i click button on form 1.</p>