$_POST merging array and storing in only one column - php

Question

I have a form that posts to a php handler which saves the data from the form into a database.
I don't think the save function is the problem. I think its a problem with the $_POST merging the forms data. When I view the sql table, the data is there but all the values are appearing in one column so the variables are being passed from the form correctly.
This is my code:
$name = isset($_POST['name']) ? $_POST['name'] : '';
$email = isset($_POST['email']) ? $_POST['email'] : '';
$com_dis = isset($_POST['comment']) ? $_POST['comment'] : '';
$id = isset($_POST['id']) ? $_POST['id'] : '';
$lowercase = strtolower($email);
$image = md5( $lowercase );
try{
$conn = new PDO( DB_DSN, DB_USERNAME, DB_PASSWORD );
$sql = 'INSERT INTO comments ( com_name, com_email, com_dis, post_id_fk ) VALUES ( :name, :email, :com_dis, :id )';
$st = $conn->prepare ( $sql );
$st->bindValue( ":name", $name, PDO::PARAM_STR );
$st->bindValue( ":email", $email, PDO::PARAM_STR );
$st->bindValue( ":com_dis", $com_dis, PDO::PARAM_STR );
$st->bindValue( ":id", $id, PDO::PARAM_INT );
$st->execute();
$conn = null;
}catch(PDOException $e ){
echo "QUERY FAILED" . $e->getMessage();
};
If I use $id = $_POST['id'] for all the variables, it gets an unidentified index error thrown. When I print $_POST it displays an array where the array is called name and the contents are just the rest of the variables which is the same data stored in the table.
How do I either get the data to save correctly or stop $_POST from merging the variable so they? save in the correct columns?
This is my form:
<form action="#" method="post">
<input type="hidden" name="id" id="id" value="<?php echo $id; ?>"/><br />
<span class="titles">Name</span><span class="star">*</span><br /><input type="text" name="name" id="name"/><br />
<span class="titles">Email</span><span class="star">*</span><br /><input type="text" name="email" id="email"/><br />
Comment<br /><textarea name="comment" id="comment"></textarea><br />
<input type="submit" class="submit" value=" Submit Comment " />
</form>
The form is passed via AJAX:
$(function() {
$(".submit").click(function() {
name = $("#name").val();
var email = $("#email").val();
var comment = $("#comment").val();
var id = $("#id").val();
var dataString = 'name='+ name + 'email=' + email + 'comment=' + comment + 'id=' + id;
if(name=='' || email=='' || comment==''){
alert('Please Give Valid Details');
}
else{
$("#flash").show();
$("#flash").fadeIn(400).html('<img src="ajax-loader.gif" align="absmiddle"> <span class="loading">Loading Comment...</span>');
$.ajax({
type: "POST",
url: "commentajax.php",
data: dataString,
cache: false,
success: function(html){
$("ol#update").append(html);
$("ol#update li:last").fadeIn("slow");
document.getElementById('email').value='';
document.getElementById('name').value='';
document.getElementById('comment').value='';
$("#name").focus();
$("#flash").hide();
}
});
}
return false;
});

Answer 1

You need to concatenate your data string:
var dataString = 'name='+ name + 'email=' + email + 'comment=' + comment + 'id=' + id;
should be
var dataString = 'name='+ name + '&email=' + email + '&comment=' + comment + '&id=' + id;