Insert mysql data using javascript and ajax - php

Question

Basically I need to insert the value of a textarea asynchronously but when I call the function insertSQLData() it shows the source code of the page, besides that I cant find the other errors. I omitted the database code and any irrelevant code as well.
<?php
$q = $_GET["q"];
$username = $_COOKIE["user"];
?>
function insertSQLData(str){
if(str == 0){
document.getElementById("holder").innerHTML="";
return;
}
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById("holder").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "index-async.php?q=+str", true);
xmlhttp.send();
}
<form action="" method="get">
<textarea onblur="insertSQLData(this.value);" id="quick-post-form" name="quick-post-form"></textarea>
<input type="button" value="Submit" name="quick-post-btn" id="quick-post-submit">
<div id="holder"></div>
if(isset($username) && !empty($q)){
mysql_query("INSERT INTO comments (comment,username) VALUES ('$q', '$username')");
} elseif(!empty($q)) {
mysql_query("INSERT INTO comments (comment,username) VALUES ('$q', 'Guest User')");
}

Answer 1

You have to load it before your php file starts up.
All you have to do is to write a controller, and use it anywhere instead of your index.php and in that, (after loading those things from DB) redirect user to your index.php page providing those data you need.

Answer 2

So you are calling same page where ajax call is..
obviously it returns the code.
write php code in another file and try to call it.
it works

Answer 3

You write code in conditional statement as per given below.
<?php
if(isset($_GET["q"]))
{
$q = $_GET["q"];
$username = $_COOKIE["user"];
if(isset($username) && !empty($q)){
mysql_query("INSERT INTO comments (comment,username) VALUES ('$q', '$username')");
} elseif(!empty($q)) {
mysql_query("INSERT INTO comments (comment,username) VALUES ('$q', 'Guest User')");
}
}
else
{
?>
<script>
function insertSQLData(str){
if(str == 0){
document.getElementById("holder").innerHTML="";
return;
}
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById("holder").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "index-async.php?q=+str", true);
xmlhttp.send();
}
</script>
<form action="" method="get">
<textarea onblur="insertSQLData(this.value);" id="quick-post-form" name="quick-post-form"></textarea>
<input type="button" value="Submit" name="quick-post-btn" id="quick-post-submit">
<div id="holder"></div>
<?php
}
?>