title: Display a hidden div after a html form submit to show output
body: <p>I have a html form to collect name and place and after user submit the form, the out will display at bottom of the page using PHP echo</p>
  <p>My requirement is,</p>
  <blockquote>
  <p>hide the <code>output div</code> before the form submit and after user enter data and submit, I have to make <code>output div</code> visible to display form output using PHP echo.</p>
  </blockquote>
  <p>Here is my HTML code:</p>
  <pre><code>&lt;div class=&quot;main&quot;&gt;
      &lt;form id=&quot;main&quot; name=&quot;main&quot; action=&quot;#text&quot; method=&quot;post&quot;&gt;
          &lt;div class=&quot;input&quot;&gt;
              &lt;div id=&quot;name&quot;&gt;
                  &lt;div class=&quot;block&quot;&gt;
                      &lt;div class=&quot;input-quest&quot;&gt;Your Name&lt;/div&gt;
                      &lt;div class=&quot;input-resp&quot;&gt;&lt;span&gt;&lt;input  class=&quot;textbox&quot; id=&quot;nm&quot; name=&quot;nm&quot; type=&quot;text&quot;  value=&quot;&quot; /&gt;&lt;/span&gt; 
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id=&quot;place&quot;&gt;
                  &lt;div class=&quot;block&quot;&gt;
                      &lt;div class=&quot;input-quest&quot;&gt;Your Place&lt;/div&gt;
                      &lt;div class=&quot;input-resp&quot;&gt;&lt;span&gt;&lt;input  class=&quot;textbox&quot; id=&quot;pl&quot; name=&quot;pl&quot; type=&quot;text&quot; value=&quot;&quot; /&gt;&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;submit&quot;&gt;
              &lt;input id=&quot;generate&quot; type=&quot;submit&quot; name=&quot;script&quot; value=&quot;generate&quot; /&gt;
              &lt;input type=&quot;submit&quot; id=&quot;clear&quot; name=&quot;clear&quot; value=&quot;clear&quot; /&gt;
          &lt;/div&gt;
      &lt;/form&gt;
      &lt;div class=&quot;output&quot;&gt;
          &lt;?php $name = $_POST['nm']; $place = $_POST['pl']; echo &quot;Hello, I am $name and I am from $place&quot;; ?&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>It contain the PHP echo codes at <code>output div</code> section.</p>
  <p>I have searched for solution in previous questions and tried below methods mentioned there:</p>
  <p>1.Added a inline CSS tag for <code>output div</code> to hide it</p>
  <pre><code>&lt;div id=&quot;output&quot; style=&quot;display: none;&quot;&gt;
      &lt;!-- echo php here --&gt;
  &lt;/div&gt;
  </code></pre>
  <p>and added JavaScript to call function during submit</p>
  <pre><code>$('main').submit(function(){
      $('#output').show();  
  });
  </code></pre>
  <p>It didn't work.</p>
  <hr />
  <p>2.Tried with below JavaScript code</p>
  <pre><code>$('main').submit(function(e){
      $('#output').show();
      e.preventDefault();
  });
  </code></pre>
  <p>It didn't work.</p>
  <hr />
  <p>3.Removed inline CSS for output div to hide and added the same to my CSS stylesheet</p>
  <pre><code>&lt;div id=&quot;output&quot;&gt;
  </code></pre>
  <p>and in stylesheet</p>
  <pre><code>#output{
      display:none;
  }
  </code></pre>
  <p>and used below JavaScript code on submit</p>
  <pre><code>$('main').submit(function(){
      $('#output').css({
          'display' : 'block'
      }); 
  });
  </code></pre>
  <p>It didn't work.</p>
  <hr />
  <ol start="4">
  <li><p>Added a <code>onclick</code> function along with the form submit</p>
   
  </li>
  </ol>
  <p>and submit button code:</p>
  <pre><code>&lt;input  id=&quot;generate&quot; type=&quot;submit&quot;  name=&quot;script&quot; value=&quot;generate&quot; onclick=&quot;showoutput()&quot;/&gt;
  </code></pre>
  <p>and JavaScript:</p>
  <pre><code>showoutput(){
      $('#output').slideDown(&quot;fast&quot;);
  }
  </code></pre>
  <p>and with</p>
  <pre><code>showoutput(){
      $('#output').show();  
  }
  </code></pre>
  <p>It didn't work.</p>
  <hr />
  <p>Please suggest a solution to do this.</p>