title: Display a hidden DIV after a form submit action
body: <p>I am trying to show a hidden div after submitting a form data</p>
  
  <p>Below is my form html where the input section will have a form to enter the data and after submitting the form I have to show hidden output section and show result there</p>
  
  <p>html code:</p>
  
  <p> </p>
  
  <pre><code>&lt;div id="input"&gt;
  
  
  ----- some form datas here ----
  
  &lt;div id="submit"&gt;
          &lt;input type="submit"  id="generate" name="script" value="generate" /&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  &lt;div id="output" style="display: none;"&gt;
  
  
  --- php echo from above form------
  
  &lt;/div&gt;
  
  
  &lt;/form&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#input{
  width:800px;
  margin: auto;
  border-width:1px;
  border-style:solid;
  border-color:#ddd;
  
  }
  
  
  #output{
  width:800px;
  margin: auto;
  border-width:1px;
  border-style:solid;
  border-color:#ddd;
  
  }
  </code></pre>
  
  <p>After going through some previous discussion about the same topics, below is one of the answered solution for this</p>
  
  <p>create a JavaScript like to show the hidden div after form submission.</p>
  
  <pre><code>$('form').submit(function(){
      $('#output').show();  
  
  });
  </code></pre>
  
  <p>or</p>
  
  <pre><code>$('form').submit(function(e){
      $('#output').hide();  
      e.preventDefault();
      // Or with: return false;        
  });
  </code></pre>
  
  <p>But both the solutions are not working for me.the second is able to show the hidden div <code>output</code> but it not showing actual form data.</p>
  
  <p>How can I show it correctly ? I need to show this after form submission <code>(type="submit")</code></p>
  
  <p><strong>UPDATE:</strong></p>
  
  <ol>
  <li><p>Removed the inline css to hide div </p>
  
  </li>
  <li><p>Added css function in style sheet to hide div</p>
  
  <pre><code>#output{
  display:none;
  width:800px;
  margin: auto;
  border-width:1px;
  border-style:solid;
  border-color:#ddd;
  }
  </code></pre></li>
  <li><p>Added below jquery to show div on form submit</p>
  
  <pre><code>$('form').submit(function(){
  $('#output').css({
    'display' : 'block'
  }); 
  
  });
  </code></pre></li>
  </ol>
  
  <p>Still I an not able to achieve the result. Any clue here ?</p>