PHP never receives nested jQuery $.post data

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

also: $('#loginform').submit(function () { event.preventDefault(); this should be: $('#loginform').submit(function (event) { event.preventDefault(); — andrew
– andrew, Commented Nov 7, 2013 at 7:28

Tushar Gupta - curioustushar · Accepted Answer · 2013-11-07 07:24:53Z

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 );

answered Nov 7, 2013 at 7:24

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Tushar Gupta - curioustushar Over a year ago

@Boaz see his jQuery he is loading form on client side .

Boaz Over a year ago

You're right, but by the time the submit handler is bound the form definitely exists. OP is also saying the handler is executed.

Johan Rensenbrink Over a year ago

The handler does get executed so that's not the issue here. Although this does allow me to move the code outside the nested first $.post function so it's appreciated.

Tushar Gupta - curioustushar Over a year ago

try <?php echo '<pre>',print_r($_POST,true),'</pre>' ?>and $.post("checklogin.php", formData, function(data) { console.log(data) })

Johan Rensenbrink Over a year ago

Well, it's definitely getting the data through so I'm gonna say that answers that. Thanks!

|

Collectives™ on Stack Overflow

PHP never receives nested jQuery $.post data

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related