jQuery post a serialized form then inserting into mysql via php?

Question

Hello, I'm trying to post a serialized form to a sumbit.php file, in turn, will then insert into a MySQL database; however, the last input which is hidden, is not getting inserted into the database, though the rest are.

Here's some snippet examples of what I've got thus far which is not working:

HTML

            <form method="post" action="" >
                            <label for="name" class="overlay"><span>Name...</span></label>
                            <input class="input-text" type="text" name="name" id="name" />

                            <label for="email" class="overlay"><span>Email...</span></label>
                            <input type="text" class="input-text" name="email" id="email"/>

                            <label for="website" class="overlay"><span>Website...</span></label>
                            <input type="text" class="input-text" name="website" id="website"/>


                            <label id="body-label" for="body" class="overlay"><span>Comment it up...</span></label>
                            <textarea class="input-text" name="body" id="body" cols="20" rows="5"></textarea>

                            <input type="hidden" name="parentid" id="parentid" value="0" />
                            <input type="submit" value="Comment" name="submit" id="comment-submit" />

                </span>
            </form>

Javascript

$('form.').submit(function(event) {  

    $.post('submit.php',$(this).serialize(),function(msg){
        // form inputs consist of 5 values total: name, email, website, text, and a hidden input that has the value of an integer
    }
});

PHP (submit.php)

$arr = array();

    mysql_query("   INSERT INTO comments(name,email,website,body,parentid)
                VALUES (
                    '".$arr['name']."',
                    '".$arr['email']."',
                    '".$arr['website']."',
                    '".$arr['body']."',
                    '".$arr['parentid']."'
                )");

Answer 1

When you serialize a form, the data is delimited with ampersands (&)

In your PHP code you have to explode on the ampersands and then explode again for each in that new array on the = sign.

Example

$thedata = explode("&", $_POST['data']);
foreach($thedata as $new) {
    list($x, $y) = explode("=", $new);
    ${$x} = $y;
}

Then you will have PHP variables like $name, $email, $address, etcetera whatever else you named your inputs on the form.

Answer 2

Try manually adding the hidden field. As Amber pointed out, seems to be a problem with the hidden field.. could be a bug in an old jquery version, maybe make sure you have the latest first.

Otherwise, maybe try adding the hidden field...?

$('form.').submit(function(event) {  

    $.post('submit.php',$(this).serialize()+'&parentid='+$('#parentid').val(),function(msg){
    }
});

Answer 3

Your script should work fine. Please check parentid at backend whether it is null or 0 ?? you can use

var_dump($arr); 

Then check the parentid field of the table comments whether it accept 0 or null values or not and check your foreign key is defined in a current way as you deserve.

Thanks

Answer 4

Ok here is the working code. There were a few errors (eg. unclosed function braces on post, unclosed span tags, no POST var in your PHP etc.)

HTML (make sure there is a form ACTION so that if people dont have js on you can still use the form)

<form method="post" id="test" enctype="multipart/form-data" action="post.php">
    <label for="name" class="overlay"><span>Name...</span></label>
    <input class="input-text" type="text" name="name" id="name" />

    <label for="email" class="overlay"><span>Email...</span></label>
    <input type="text" class="input-text" name="email" id="email"/>

    <label for="website" class="overlay"><span>Website...</span></label>
    <input type="text" class="input-text" name="website" id="website"/>


    <label id="body-label" for="body" class="overlay"><span>Comment it up...</span></label>
    <textarea class="input-text" name="body" id="body" cols="20" rows="5"></textarea>

    <input type="hidden" name="parentid" id="parentid" value="0" />
    <input type="submit" value="Comment" name="submit" id="comment-submit" />
</form>

Javascript

<script>
$(document).ready(function() {
    $('form').submit(function(msg) {  
        alert($(this).serialize()); // check to show that all form data is being submitted
        $.post("post.php",$(this).serialize(),function(data){
            alert(data); //post check to show that the mysql string is the same as submit                        
        });
        return false; // return false to stop the page submitting. You could have the form action set to the same PHP page so if people dont have JS on they can still use the form
    });
});
</script>

PHP

<?php
$arr = $_POST; //you need to grab the data via the POST (or request) global.

//this is just a check to show that the SQL statement is correct. Replace with your mysql connection/query
echo "INSERT INTO comments(name,email,website,body,parentid)
        VALUES (
            '".$arr['name']."',
            '".$arr['email']."',
            '".$arr['website']."',
            '".$arr['body']."',
            '".$arr['parentid']."'
        )";
?>