title: PHP never receives nested jQuery $.post data
body: <p>I'm trying to send simple form data from my index page to a PHP function, checklogin.php. What I'm finding is that no data, serialized or even direct input, is getting through to the PHP function. I know for a fact that the jQuery function is getting called, and I also know that the PHP file is called because I've put various post functions in.</p>
  
  <p>When I submit data directly from the form using <code>action="checklogin.php"</code> the $_POST data is correctly received and I can process it. However when using jQuery to intercept the form submit, no data is received.</p>
  
  <p>One thing to note is that the actual login form HTML is inserted from another page, to allow me to work on multiple pages instead of one big index file.</p>
  
  <p><strong>Form - login.php</strong></p>
  
  <pre><code>&lt;form id="loginform" name="loginform" method="post"&gt;
      &lt;td&gt;
          &lt;table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF"&gt;
              &lt;tr&gt;
                  &lt;td colspan="3"&gt;&lt;strong&gt;Member Login&lt;/strong&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td width="78"&gt;Username&lt;/td&gt;
                  &lt;td width="6"&gt;:&lt;/td&gt;
                  &lt;td width="294"&gt;&lt;input name="username" type="text" id="username"&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Password&lt;/td&gt;
                  &lt;td&gt;:&lt;/td&gt;
                  &lt;td&gt;&lt;input name="password" type="text" id="password"&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="submit" name="Submit" value="Login"&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
     &lt;/td&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>Submit event hook - Index.php</strong></p>
  
  <pre><code>$( document ).ready(function() {                
      $.post("login.php", function(data) { // retrieve login form from other page.
          $("#page5").html(data); 
          $('#loginform').submit(function () {
              event.preventDefault();
              var formData = $(this).serialize();
  
              console.log("Form Data: " + formData); // this is not blank
  
              $.post("checklogin.php", formData, function(data) {
                  // post-login actions
              })
  
              });
          });
      })
  });
  </code></pre>
  
  <p><strong>checklogin.php</strong> (temporary until is problem resolved)</p>
  
  <pre><code>&lt;?php
      print_r($_POST);
  ?&gt;
  </code></pre>
  
  <p>As I said, even direct input such as "username=test$password=blah" instead of 'formData' results in an empty $_POST array. I've also tried using the ajax equivalent post call with no luck.</p>
  
  <p><strong>JavaScript Console Output</strong></p>
  
  <pre><code>// console.log line above $.post
  Form Data: username=test&amp;password=blah
  
  // Result from PHP print_r
  Array
  (
  )
  </code></pre>