I have multiple forms on a page and i'm trying to use jQuery form.js to save each comment that is posted and then append the comment to the UL afterwards. The save part of it is working fine. However, I am having trouble getting the comment to update the UL correctly. See code below:
//My Form
<form method="post" action="includes/answer.php" id="respond">
<input name="key_id" id="key_id" type="hidden" value="'.$row['thekey'].'" />
<textarea name="comment" id="comment"></textarea>
</form>
//The UL
<ul id="'.$row['thekey'].'" class="answer"></ul>
//The jQuery
$(document).ready(function() {
jQuery('form').ajaxForm({
target: 'ul',
success: function(data) {
$('ul#' + data.id).prepend("<li style='display:none'>"+data.comment+"</li>").fadeIn('slow');
$("ul#" + data.id +"li:first").fadeIn();
}
});
});
//Postback Code
$message = strip_tags(mysql_real_escape_string($_POST['comment']));
$id = strip_tags(mysql_real_escape_string($_POST['key_id']));
$sql_id = 'SELECT id FROM questions WHERE thekey = "'.$id.'"';
$select_result = mysql_query($sql_id);
if($select_result) {
$row = mysql_fetch_array($select_result);
$sql = 'INSERT INTO answers (answer, question_id) VALUES("'.$message.'", '.$row['id'].')';
$result = mysql_query($sql);
if($result) {
print json_encode(array("id" => $id, "comment" => $message));
}
}
This is currently outputting an array that looks something like {"id":"sadfasdf2","comment":"ds"} in place of the ul tags. How can I get it to output the actual comment in a LI?