I found a way to do this:
First i have a html form on the page such as.
<form id="myForm" action="handler.php" method="post">
Name: <input type="text" name="name" /><br />
Age : <input type="text" name="age" /><br />
<button id="sub">Save</button>
</form>
Then on a linked javascript file, I have this code.
$("#sub").click( function() {
$.post( $("#myForm").attr("action"),
$("#myForm :input").serializeArray(),
function(info){ $("#result").html(info);
});
clearInput();
});
$("#myForm").submit( function() {
return false;
});
function clearInput() {
$("#myForm :input").each( function() {
$(this).val('');
});
}
to connect with the database, the following code is put into the file db.php
<?php
$conn = mysql_connect('serverName', 'username', 'password');
$db = mysql_select_db('databaseName');
?>
finally, the php file on the server (i.e handler.php) contains
<?php
include_once('db.php');
$name = $_POST['name'];
$age = $_POST['age'];
if(mysql_query("INSERT INTO sql_table_name(name, age) VALUES('$name', '$age')"))
echo "Successfully Inserted";
else
echo "Insertion Failed";
?>
I found this here.
You can visit it for a better explanation with a video of the process.