title: How to use jquery $.post() method to submit form values
body: <p>I have 1 main page with a form and another page to process the form value
  here are source codes of the 2 pages</p>
  
  <p><strong>Form Page:</strong></p>
  
  <pre><code>&lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Form Page&lt;/title&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;form action="process.php" method="post" id="reg-form"&gt;
          Username: &lt;input type="text" id="username" name="username"&gt;
          &lt;br&gt;
          Password: &lt;input type="password" id="password" name="password"&gt;
          &lt;br&gt;
          &lt;button type="submit" id="submit-btn"&gt;Traditional Submit&lt;/button&gt;
          &lt;button type="button" id="post-btn"&gt;$.Post Submit&lt;/button&gt;
  &lt;/form&gt;
  &lt;script&gt;
      $("#post-btn").click(function(){        
          $.post("process.php",function(data){
              alert(data);
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Process Page:</strong></p>
  
  <pre><code>&lt;?php
  $username=$_POST["username"];
  $password=$_POST["password"];
  echo "Username: ".$username;
  echo "&lt;br&gt;";
  echo "Password: ".$password;?&gt;
  </code></pre>
  
  <p>if I click the "Traditional Submit" buttton, it works perfectly well.</p>
  
  <p>but when I click the "$.Post Submit" button, I just keep getting error msg "Notice: Undefined Index ..."</p>
  
  <p>I can not figure out where the problem is, please kindly help check and fix, thanks in advance!</p>