Hi there am a beginner in php and ajax, was trying to create a simple admin page which only submit a message and the message get stored in a mysql database. (via ajax ) however it seems that the no data is being parse through when I hit the submit button(I coded it so that when the submit button is pressed, the message would be send without the page refreshing).
Could someone check to see where my error could be? thank you
admin.php
<!DOCTYPE html>
<html>
<head> <!--inseart script here -->
<script type= "text/javascript" src="js/jquery.js"></script>
</head>
<body>
Message: <input type="text" name="message" id= "message_form"><br>
<input type="submit" id= "submit_form" onclick = "submit_msg()">
<script type= "text/javascript" src="js/func_submit_msg.js"> </script>
</body>
</html>
I have created a separate function file called func_submit_msg.js
//this is a function file to submit message to database
$(document).ready(function submit_msg(){
alert('worked');
$.ajax({
type: "POST",
url: "submit_data.php"
data: { message: message_form},
})
}
a connect.php file is created to connect to mysql database
<?php
$host = "localhost";
$user = "root";
$pass = ""; // phpMyAdmin mysql password is blank ? i believe
$database_name = "test"; //
$table_name = "test_table_1"; //table that will be accessing
//connect to mysql database
$db = new mysqli($host, $user, $pass, $database_name);
//check connection?
if ($db -> connect_error) {
die("error mysql database not connected: " . $db -> connect_error);
}
else {
echo "connected successfully" ;
}
?>
a submit_data.php file is created to submit to database
<?php
include "connect.php";
$insert_data=$db-> query ("INSERT INTO test_table_1(message) VALUES ('$message_form')");
if ($db->query($insert_data === TRUE) ){
echo "New record created successfully";
} else {
echo "Error: " . $insert_data . "<br>" . $cdb->error;
}
$db->close();
?>
error checking code to check whether database was inserted correctly doesn't even echo out whether it is successful or not.
Updated
submit_data.php as per # Maximus2012 suggestion
<?php
include "connect.php";
$insert_data=$db->query("INSERT INTO test_table_1(message) VALUES ($_POST['message_form'])");
if ($insert_data === TRUE) {
echo "New record created successfully";
} else {
echo "Error: " . $insert_data . "<br>" . $cdb->error;
}
$db->close();
?>
No error display but there isn't any data being recorded in the database still.
You should start by adding your success callback to your Ajax: (if you havent already)
$(document).ready(function(){
$('#submit_form').on('click', function(e){
e.preventDefault();
message_form = $('#message_form').val();
$.ajax({
type: "POST",
url: "submit_data.php",
data: {message: message_form},
success: function(data) {
$('#result').html(data);
},
error:function(err){
//handle your error
alert('did not work');
}
});
});
});
Here we use .on() as the preferred method of attaching an
event handler function
We then use .val() to get the value of the message input field
and store it in a variable to be used for POSTing to the submit_data.php script
e.preventDefault() is used so that the default event is cancelled
when click the submit button
In your html, add an element that the result can be returned to: (#result)
<html>
<head>
<script type= "text/javascript" src="js/jquery.js"></script>
<script type= "text/javascript" src="js/func_submit_msg.js"></script>
</head>
<body>
<form action="" method="POST">
Message: <input type="text" name="message" id="message_form"><br>
<input type="submit" id="submit_form">
</form>
<div id="result"></div>
</body>
</html>
Here we wrap your input in a form with the method and action
properties to ensure that the name attributes are able to be used in
POST requests
In your PHP (submit_data.php) you need to assign a value to $message_form before using it:
<?php
include "connect.php";
$message_form = $_POST['message'];
$insert_data=$db->query("INSERT INTO test_table_1(message) VALUES ('$message_form')");
if ($insert_data === TRUE ){
echo "New record created successfully";
} else {
echo "Error: " . $insert_data . "<br>" . $cdb->error;
}
$db->close();
?>
If all goes well, you should get some kind of result from this.
Related
I have a very simple form that has a field for a title and uses quill to enter a discussion. I have tried everything I can think of, but still cannot populate a mysql database with the information. I think I'm getting close, but am not quite there yet. I think the problem lies in my use of json and ajax.
Here is my html file that creates the form:
<!DOCTYPE>
<html>
<head>
<title>Discussions</title>
<meta charset="UTF-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.quilljs.com/1.2.2/quill.snow.css" rel="stylesheet">
<link href = "../css/discussionsEditor.css" rel = "stylesheet">
<script src="https://cdn.quilljs.com/1.2.2/quill.js"></script>
</head>
<body>
<div id="form-container" class="container">
<form id="discussionForm" method = "post" action ="discussionsEditor.php" role="form">
<div class="row">
<div class="col-xs-8">
<div class="form-group">
<input class="form-control" name="title" type="text" placeholder="Title">
</div>
</div>
</div>
<div class="row form-group">
<input name="discussionContent" type="hidden">
<div id="editor-container">
</div>
</div>
<div class="row">
<button class="btn btn-primary" type="submit">Submit</button>
</div>
</form>
</div>
<script>
var quill = new Quill('#editor-container', {
modules: {
toolbar: [
['bold', 'italic'],
['link', 'blockquote', 'code-block', 'image'],
[{ list: 'ordered' }, { list: 'bullet' }]
]
},
placeholder: 'Compose an epic...',
theme: 'snow'
});
</script>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="../js/discussionsEditor.js"></script>
</body>
</html>
Here is my javascript file where I try to use json and ajax to transfer the data.
var form = document.querySelector('form');
form.onsubmit = function() {
// Populate hidden form on submit
var discussionContent = document.querySelector('input[name=discussionContent]');
discussionContent.value = JSON.stringify(quill.getContents());
var url ="discussionsEditor.php";
var data = stringify(quill.getContents());
alert( "the data is " + data);
$.ajax({
type: "POST",
url : url,
data : discussionContent,
success: function ()
{
alert("Successfully sent to database");
},
error: function()
{
alert("Could not send to database");
}
});
return false;
};
and finally here is my php file
<?php
try
{
$pdo = new PDO('mysql:host=localhost; dbname=mydb', "user", "password");
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$pdo->exec('SET NAMES "utf8"');
}
catch (PDOException $e)
{
$output = 'Unable to connect to the database server:' . $e->getMessage();
include '../output.html.php';
exit();
}
$title = $_POST['title'];
echo "<br />";
echo "the title is " . $title;
$discussionContent = $_POST['discussionContent'];
echo "<br />";
echo "the discussion content is ". $discussionContent;
$sql = 'INSERT INTO Discussions(Title, DiscussionContent)
Values(:Title, :DiscussionContent)';
$statement = $pdo -> prepare($sql);
$statement -> execute(array(':Title' => $title, ':DiscussionContent' => $discussionContent));
?>
If I put 'Denise' in the title field and 'cute' in the quill discussion field, the echo statements in the php file give this result:
the title is Denise
the discussion content is {"ops":[{"insert":"Cute\n"}]}
Nothing is stored in the database.
I would appreciate and help or comments. Thanks
Use getText() method if you simply need a Text value from your quill editor like below:
var quillText = quill.getText();
If you are planning to store HTML data in DB use
var quillHtml = quill.root.innerHTML.trim();
pass the value to your ajax data like this:
$.ajax({
type: "POST",
url : url,
data: {editorContent : quillText },
success: function (data,status, xhr)
{
if(xhr.status == 200) {
alert("Successfully sent to database");
}
},error: function() {
alert("Could not send to database");
}
});
Reason to post as "editorContent" is that you can get the posted values simply by
$_POST['editorContent']
in your PHP script.
After further sanitization, insert the data to DB(either HTML or TEXT).
Hope it helps :-)
Please try the following.It may help to resolve the issue:
comment is editor id.
var quill = new Quill('#comment');
var cc = quill.container.firstChild.innerHTML;
Now cc will hold the data of your div element.That can be inserted into DB.It is just example.You can use if it helps you.
Easy way:
<form method="post" id="identifier">
<div id="quillArea"></div>
<textarea name="text" style="display:none" id="hiddenArea"></textarea>
<input type="submit" value="Save" />
</form>
If you give the form an identifier, then using jQuery you can do the following:
var quill = new Quill ({...}) //definition of the quill
$("#identifier").on("submit",function() {
$("#hiddenArea").val($("#quillArea").html());
})
Now once you have the HTML in the textarea simple post it by clicking submit button
If you want to get only the content, you can add .ql-editor to your selector : $("#hiddenArea").val($("#quillArea .ql-editor").html());
Quill.js is amazing rich text editor but there is very low amount of Youtube videos and google articles about it, other than that their documentation is hard to understand. So new users may have trouble using it.
Lets come to your code...
You need to remove all attributes from form tag except "id".
Your old:
<form id="discussionForm" method = "post" action ="discussionsEditor.php" role="form">
I suggest:
<form id="discussionForm" class="You Can Use Class">
Great, You have done everything fine in JS but you have passed the object wrongly while posting the data. (I also make some new changes)
JavaScript:-
Wait... I hope you haven't forgotten to use this code block in your JS.😅
var quill = new Quill('#service_details_editor', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
//var form = document.querySelector('form');
$("#discussionForm").on('submit', function (e) {
e.preventDefault();
// Populate hidden form on submit
var discussionContent = document.querySelector('input[name=discussionContent]');
discussionContent.value = JSON.stringify(quill.getContents());
var url ="discussionsEditor.php";
var form = new FormData(this);
$.ajax({
type: "POST",
url : url,
data : form,
contentType:false,
processData:false,
success: function (response) //Response which is come from "discussionsEditor.php" if Query run successfully.
{
alert("Successfully sent to database");
},
error: function(response)
{
alert("Could not send to database");
}
});
return false;
});
PHP:-
Your PHP may working well no doubt but I usually write PHP like this. 😄
//Connection Block Start
<?php
$host = "localhost";
$user = "root";
$password = '';
$db_name = "Your DB Name";
$con = mysqli_connect($host, $user, $password, $db_name);
if (mysqli_connect_errno()) {
die("Failed to connect with MySQL: " . mysqli_connect_error());
}
//Connection Block END
if (isset($_POST['title'])) {
$title = $_POST['title'];
$DiscussionContent = $_POST['DiscussionContent'];
$sql = "INSERT INTO Discussions(title,DiscussionContent) VALUES ('$title','$DiscussionContent')";
if (mysqli_query($con, $sql)) {
echo 1;
} else {
echo 0;
}
}
die();
exit;
}
I am curious to know if it's possible that I can have a div reload like a window does. The reason for this is I have a forum but I don't want a full page reload after four is completed. So I was wondering if just the elements that are in that div or forum section could do a background reload or just load by them self when the submit button is pressed.
This is in a file called forum where the information gets typed in. I want it to not reload the page but stay on that forum and still send the data to the database.
<html>
<body>
<form action="demo.php" method="post" />
<p>Input 1: <input type="text" name="firstname" /></p>
<input type="submit" value="Submit" />
</form>
<div id = "load_results"></div>
</body>
</html>
This is sending the information to the database but I want it to be done discreetly.
<?php
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "myDB";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$value = $_POST['firstname'];
$sql = "INSERT INTO MyGuests (firstname) VALUES ('$value')";
if ($conn->query($sql) === TRUE) {
echo "<a href=https://twitter.com/angela_bradley>My Twitter</a>";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
?>
Yes, there is a way. It is called AJAX - but, not to worry, it's pretty simple.
Your code will look something like this:
HTML:
<form action="demo.php" method="post" />
<p>Input 1: <input type="text" name="firstname" /></p>
<input type="submit" value="Submit" />
</form>
js/jQuery:
$(function(){
$('form').submit(function(evt){
//next line stops form submission from sending you to `demo.php`
evt.preventDefault(); //evt stands for "event" - can be anything. I use e.preventDefault()
var fn = $('[name=firstname]').val();
$.ajax({
type: 'post',
url: 'demo.php', //send data ONLY to demo.php -- page stays as it is
data: 'first='+fn,
success: function(d){
if (d.length) alert(d);
}
}); //END ajax
}); //END document.ready
demo.php
<?php
$fn = $_POST['fn'];
//Do your database insert here
//If you wish, you can return some data to the AJAX's success function:
echo 'You submitted: ' .$fn;
Here are some posts with simple AJAX examples:
AJAX request callback using jQuery
I'm trying to use ajax to insert using a simple form into my database(using insert.php) to practice. Below the var_dump($email) is hitting null. The script runs through to here:
echo "Data for $name inserted successfully!";
The problem is the variables are null as stated.
So we make it to there, but the output is an empty variable field like below:
Data for inserted successfully!
Am I missing something here?
index.php
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- The ajax/jquery stuff -->
<script type="text/javascript">
$(document).ready(function(){
//Get the input data using the post method when Push into mysql is clicked .. we pull it using the id fields of ID, Name and Email respectively...
$("#insert").click(function(){
//Get values of the input fields and store it into the variables.
var name=$("#name").val();
var email=$("#email").val();
//use the $.post() method to call insert.php file.. this is the ajax request
$.post('insert.php', {name: name, email: email},
function(data){
$("#message").html(data);
$("#message").hide();
$("#message").fadeIn(1500); //Fade in the data given by the insert.php file
});
return false;
});
});
</script>
</head>
<body>
<form>
<label>Name: </label> <input id="name" type="text" />
<label>E-Mail: </label> <input id="email" type="text" />
</form>
<a id="insert" title="Insert Data" href="#">Push into mysql</a>
<!-- For displaying a message -->
<div id="message"></div>
</body>
</html>
insert.php
<?php
//Configure and Connect to the Databse
include "db_conx.php";
if (!$db_conx) {
die('Could not connect: ' . mysqli_error());
}
//Pull data from home.php front-end page
$name=$_POST['name'];
$email=$_POST['email'];
echo "<pre>";
var_dump($email);
echo "</pre><br>";
//Insert Data into mysql INSERT INTO best_rate (name,email)
$query= "INSERT INTO best_rate(name,email) VALUES('$name','$email')";
$result = mysqli_query($db_conx,$query);
if($query){
echo "Data for $name inserted successfully!";
}
else{ echo "An error occurred!"; }
?>
UPDATE PHP #2
<?php
//Configure and Connect to the Databse
include "db_conx.php";
if (!$db_conx) {
die('Could not connect: ' . mysqli_error());
}
//Pull data from home.php front-end page
$name=$_POST['myname'];
$email=$_POST['myemail'];
echo "<pre>";
var_dump($email);
echo "</pre><br>";
//Insert Data into mysql INSERT INTO best_rate (name,email)
$query= "INSERT INTO best_rate(name,email) VALUES('$name','$email')";
$result = mysqli_query($db_conx,$query);
if($query){
echo "Data for $name inserted successfully!";
}
else{ echo "An error occurred!"; }
?>
HTML #2
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- The ajax/jquery stuff -->
<script type="text/javascript">
$(document).ready(function(){
//Get the input data using the post method when Push into mysql is clicked .. we pull it using the id fields of ID, Name and Email respectively...
$("#insert").click(function(){
//Get values of the input fields and store it into the variables.
var name=$("#name").val();
var email=$("#email").val();
//use the $.post() method to call insert.php file.. this is the ajax request
$.post('insert.php', {myname: name, myemail: email},
function(data){
$("#message").html(data);
$("#message").hide();
$("#message").fadeIn(1500); //Fade in the data given by the insert.php file
});
return false;
});
});
</script>
</head>
<body>
<form>
<label>Name: </label> <input id="name" type="text" name="myname"/>
<label>E-Mail: </label><input id="email" type="text" name="myemail"/>
</form>
<a id="insert" title="Insert Data" href="#">Push into mysql</a>
<!-- For displaying a message -->
<div id="message"></div>
</body>
</html>
Table Structure
===============================================
id | name | email
db_conx.php
<?php
$db_conx = mysqli_connect("localhost", "user", "pass", "database");
if (mysqli_connect_errno()) {
echo mysqli_connect_error();
exit();
}
?>
you havent gave name attribut to your feilds
<input id="name" type="text" />
use instead
<input id="name" type="text" name="myname"/>
and then used like this in your php file
$name=$_POST['myname'];
I can see you are having post method issue so we can use $.get instead of $.post and receive the data on $_GET["name"]
I think this is correct solution for now.
Thanks
I have checked your code and working correctly, as I can see there might be some issue with database connection or something mysql related. Your code working correct no need to give name or any other parameter in HTML as you have posted and given variable in jquery.
If you want more details you need to provide mysql related config file and table structure so I can check correctly.
Thanks
It sounds to me that the values from the inputs aren't getting passed to the php script to insert them.
I have noticed in your code that you pass an oject that contains these values:
$.post('insert.php', {myname: name, myemail: email},
I beleive that you are setting the name of the property (ie. myname) incorrectly. From my understanding, the javascript is interpriting myname as a variable rather than a name. The correct code would be:
$.post('insert.php', {'myname': name, 'myemail': email},
This would then properly set the POST variables to use in your php code.
I am making a question/status posting system using JQuery and Ajax however an error is being displayed "Notice: Undefined index: status in C:\xampp\htdocs\deadline\data.php on line 5" which is my line of code "$var = $_POST['status']; "
My system works as you have to log in to post a question(using sessions) BUT the issue is with my JQuery/AJAX script as the data that I have on homepage.php is not being sent to data.php (from my understanding which is why my index 'status' is undefined).
MY CODE
<?php
include("connection.php");
session_start();
if(isset($_SESSION['user_id']) && $_SESSION['user_id'] != "") {
}
else {
header("location:login.php");
}
$sid = $_SESSION['user_id'];
$conn = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
$sql = "SELECT * FROM `users` WHERE id='{$sid}'";
$query = $conn->query($sql);
$result = $query->fetch_assoc();
$fname = $result['fname'];
$lname = $result['lname'];
$time = time();
?>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//daddy code
$ (document).ready(function() {
//mama code
$("button#postbutton").click(function() {
//children code
var status = $("textarea#status").value();
if(status == "") {
return false;
}
var data = 'status='+status;
$.ajax({
type: "POST",
url: "data.php",
data: data,
success: function(data) {
$("#statustext").html(data);
}
});
});
});
</script>
</head>
<body>
<div id="global">
<form action="" onsubmit="return false">
<textarea id="status"></textarea>
<button id="postbutton">POST</button>
LOGOUT
</form>
<br/>
<br/>
<div id="allstatus">
<!-- SKELETON -->
<div id="status">
<div id="statuspic">
</div>
<div id="statusinfo">
<div id="statusname">JOnathan</div>
<div id="statustext"> this is the question</div>
<div id="statusoption"><button id="likestatus">LIKE</button></div>
<div id="statusoption"><button id="commentstatus">COMMENT</button></div>
<div id="statusoption"><button id="sharestatus">SHARE</button></div>
<div id="statusoption"><button id="statustime">TIME</button></div>
</div>
</div>
<!-- SKELETON -->
</div>
</div>
</body>
</html>
<?php
$var = $_POST['status'];
const DB_HOST = 'localhost';
const DB_USER = 'root';
const DB_PASS = '';
const DB_NAME = 'forum';
//connecting
$conn = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
if($conn->connect_error) {
die("Connection Failed: " . $conn->connect_error);
} else {
echo " success";
}
$sql = "INSERT INTO `question`(id, question) VALUES ('', '{$var}')";
$result = $conn->query($sql);
if($result) {
echo "inserted successfuly";
}
else {
echo "failed: " . $conn->error;
}
echo " the text: " .$var. " has been added to database.";
?>
HOW IT SHOULD WORK
I want to use JQuery/AJAX on my homepage.php to send data to data.php and that data gets returned back to homepage.php. On success to be displayed in my div #statustext.
Meaning when i write a question in textarea input field the data gets stored in database and retrieved and displayed in my div on the browser.
Please help me thanks..
you should change your script like below. Ajax sends data to url in a serialize manner either you have to use form serialize which will send all the fileds info to your php url other wise if you have to send only one field value then you can do this change
<script type="text/javascript">
//daddy code
$ (document).ready(function() {
//mama code
$("button#postbutton").click(function() {
//children code
var status = $("textarea#status").value();
if(status == "") {
return false;
}
var data = {'status='+status};
$.ajax({
type: "POST",
url: "data.php",
data: data,
success: function(data) {
$("#statustext").html(data);
}
});
});
});
</script>
First of all use .val() not .value() when you getting value of your message. Second mistake - is using two id = "sattus". Id of elements must be unique or use class = "" for ident your class of elements.
Don't give same id to more then 1 html element !
In your code :
<textarea id="status"></textarea>
and
<div id="status">
both contains same id ! Please correct it first.Also In your code as Spencer mentioned in his answer that add name attribute with value "status". No doubt as you are using jQuery selector it should pick up correct one,though you can just alert it before sending the request using AJAX.
also set data variable as var data = {status : status};
POST uses name and not id so change this:
<textarea id="status"></textarea>
To this:
<textarea name="status"></textarea>
For the data make sure it's the data for your form, and add method="post" to it so it can send POST data. For example if you gave your form an id of yourForm:
HTML
<form action="" method="post" id="yourForm" onsubmit="return false">
JS
$.ajax({
...
data: $("#yourForm").serialize(),
...
});
Is there anyway to load the newly inserted rows to the database without refreshing the page using jQuery? I am able to send the data to the database without refreshing using jquery but I am stuck at showing that data back without refreshing the page. How do I display the data from the table without refreshing page and make it appear under the table in index.php which I have to display the retrieved data? Thanks
This is my index.php
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#submit').click(function(){
$.ajax({
type: "POST",
url: 'send.php',
data: "user=" + $('#user').val() + "&comment=" + $('#comment').val(),
success: function(data){
$('input[type=text]').val('')
$('#status').html(data);
}
});
});
});
</script>
</head>
<body>
<div>
<input type="text" name="user" id="user">
<input type="text" name="comment" id="comment">
<input name="submit" type="submit" id="submit">
<div id="status"></diV>
</div>
<br>
<?php
$con=mysqli_connect("localhost","root","","user");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM comments");
echo "<table width='640' >
<tr>
</tr>";
while($row = mysqli_fetch_array($result))
{
echo "<tr >";
echo "<td style='vertical-align:text-top'>" . $row['user'] . "</td>";
echo "<td><br><br><br>" . wordwrap($row['comment'], 90, '<br>',true) . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
And here is my send.php which submits the data to the table.
<?php
$mysqli = new mysqli("localhost", "root", "", "user");
if ($mysqli->connect_errno) {
echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
}
$username = $_POST["user"];
$comment = nl2br($_POST['comment']);
$stmt = $mysqli->prepare("INSERT INTO comments (user, comment) VALUES (?,?)");
$stmt->bind_param('ss', $username, $comment);
$stmt->execute();
echo"comment posted successfully";
?>
This is a brief example for fetching data from a mysql database using JQuery AJAX and php. JQuery AJAX allows us to update a page's content without reloading the page:
http://openenergymonitor.org/emon/node/107
http://viralpatel.net/blogs/jquery-ajax-tutorial-example-ajax-jquery-development/
make send.php send you back the data you need to load the newly inserted row.
Let's say you inserted a comment that says "Hello world". If nothing goes wrong, send.php could, for instance, echo the content of the comment (Hello world in this case), and you could make use of that in the success function (from the data parameter).
look at the first answer in this question, might be useful.
You should append the new comment to the table with jquery in the success callback function of your ajax request.
To append:
$("table").append("<tr><td style='vertical-align:text-top'>"+$('#user').val()+"</td><td><br><br><br>"+$('#comment').val()+"</td></tr>");
Keep the thing you want to append in one line of code and make sure you don't clear the values of #user and #comment before you include them to the append string.