Question

I need to use AJAX to save user input comments instantly to the database.
This is the comment box.

<div class="comment">
        <form action="comment.php">
        <textarea cols="35" name="comments"> Give us comment </textarea>
        <input type="button" value="comment" onclick="ajaxFunction()">
        </form>                 
 </div>

This is the php code

<?php

$link = mysql_connect("localhost","root","");
mysql_select_db("continental_tourism");

$comments = $_POST['comments'];

if($comments == "")
echo "Please type your comment";
else
{
$query = "insert into comment(comment) values('$comments') ";
mysql_query($query);
} 
return;
?>

I need to know how this should be changed.
Thank You

Answer 1

I would chnage your HTML like this

<textarea cols="35" id="comments"> Give us comment </textarea>
<input type="button" value="comment" id="btnSave" />

And the script

$(function(){
 $("#btnSave").click(function(e){
  e.preventDefault();
  $.post("yourphpfile.php", { comments : $("#comments").val() } ,function(data){
     alert(data);
  });  
 }); 
});

The above script will send an ajax request to yourphpfile.php with the value present in the textarea with id comment. Then once it gets some data back from the server page. it justs alerts it ( you may show this in a seperate div if you want ). You should echo the response from your php file after saving the data to database.

As bracketworks already mentioned, you should be careful about SQL injections while saving data which is being read from the querystring value. do proper sanitization before putting it in a query. Sorry i am not a php guy. so not sure how to do that.

Don’t forget to include the jQuery library to your page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

You may use firebug console for debugging your script error if you run into any.