title: Show form and get input on the same page, using jQuery
body: <p>So, I'll try to describe what I'm trying to make.</p>
  
  <p>A form should appear on the top. Just one input and a submit button. When you click submit, a pop-up should appear with the result. </p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
  
          &lt;script type="text/javascript"&gt;
              $(document).ready(function(){
                  $(".show").click(function(){
                  $("#popup").fadeIn();
                  return false; 
                  });
              });
          &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;    
          &lt;form action="&lt;?php echo $_SERVER['PHP_SELF'];?&gt;" method="post"&gt;
              Number: &lt;input type="number" name="number" /&gt;
              &lt;input class="show" type="submit" name="submit" /&gt;
          &lt;/form&gt;
  
          &lt;div id="popup"&gt;    
              &lt;?php
                  if(isset($_POST["number"])) {
                      echo $_POST["number"];
                  }
              ?&gt;
                &lt;a id="iks"&gt;Close&lt;/a&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>(I removed a part of the <code>&lt;head&gt;</code> to keep it smaller, but there's style that states <code>display:none;</code> for <code>#popup</code>)</p>
  
  <p>The problem is that it won't update: it remains the same. The pop-up works, but it always gives the same number, no matter what I type.</p>
  
  <p>I tried without jQuery, and it works, so it's not about php/html.</p>