PHP从不接收嵌套的jQuery $ .post数据

Question

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.

When I submit data directly from the form using action="checklogin.php" the $_POST data is correctly received and I can process it. However when using jQuery to intercept the form submit, no data is received.

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.

Form - login.php

<form id="loginform" name="loginform" method="post">
    <td>
        <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
            <tr>
                <td colspan="3"><strong>Member Login</strong></td>
            </tr>
            <tr>
                <td width="78">Username</td>
                <td width="6">:</td>
                <td width="294"><input name="username" type="text" id="username"></td>
            </tr>
            <tr>
                <td>Password</td>
                <td>:</td>
                <td><input name="password" type="text" id="password"></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td><input type="submit" name="Submit" value="Login"></td>
            </tr>
        </table>
   </td>
</form>

Submit event hook - Index.php

$( 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
            })

            });
        });
    })
});

checklogin.php (temporary until is problem resolved)

<?php
    print_r($_POST);
?>

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.

JavaScript Console Output

// console.log line above $.post
Form Data: username=test&password=blah

// Result from PHP print_r
Array
(
)

Answer 1

Use .on()

As elements are added dynamically you can not bind events directly to them .So you have to use Event Delegation .

$(document).on('submit','#loginform',function () { //code here }

or better use

$('#page5').on('submit','#loginform',function () { //code here }

Syntax

$( elements ).on( events, selector, data, handler );