View Full Version : Post Form to MySql Database

09-15-2010, 09:12 PM
I know how to take a form, and have php process the POST variables and add the information to a database. And I'm doing all sorts of google searches on ajax, but haven't found a sample or tutorial to learn from, and I'm pretty clueless with javascript.

Is iy possible to use javascript/ajax to submit a form, and have this infromation added to a database? Does anyone have any sample code or a know of a good tutorial to look at?


09-16-2010, 11:00 AM
It's pretty easy with jQuery (http://jquery.com/).

For example, with a form like this:

<form id="fmExample">
Text: <input type="text" id="txtText" name="txtText" value="">
Check: <input type="checkbox" id="chkCheck" name="chkCheck" value="1">
<select id="selSelect" name="selSelect">
<option value="0"> - Select - </option>
<option value="1">Dogs</option>
<option value="2">Cats</option>
<input type="submit" value="Submit">

You could post it via ajax to your server-side processing page with something like:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
var objForm = $(this);
var form_values = objForm.serializeArray();
$.post('response.php', form_values, function(response){
$('<p>'+ response +'</p>').insertAfter(objForm);
return false;

Or for an even easier ride, and one that'll deal with stuff like file uploads, you could look at the jquery form plugin (http://jquery.malsup.com/form/).

09-19-2010, 08:09 AM
hay you can use this code also this is very simple..

this is your formfile.html with ajax .

<head><title> Store data with the help of ajax </title>

<script type="text/javascript">

function store()

document.getElementById("message").innerHTML = "Please Wait....";


xmlhttp = new XMLHttpRequest();

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");


if(xmlhttp.readyState==4 && xmlhttp.status==200)

document.getElementById("message").innerHTML = xmlhttp.responseText;



var name = document.form1.yourname.value;
var age = document.form1.yourage.value;

xmlhttp.open("GET","mydatabase.php?name=" + name + "&age=" + age, true);





<form name="form1">

<table cellpadding="3px" cellspacing="2px" align="center">
<td> <t style="font-size:14px; color:gray; font-family:verdana"> Enter your name </t> </td>
<td> <input type="text" name="yourname" size="35" > </td>
<td> <t style="font-size:14px; color:gray; font-family:verdana"> Enter your Age </t> </td>
<td> <input type="text" name="yourage" size="35" > </td>
<td> <input type="button" name="send" value="Store Data" onclick="store()" > </td>
<td> <div id="message" style="font-size:14px; color:orange; font-family:verdana"> </div> </td>



and this is your mydatabase.php file..


$name = $_GET['name'];
$age = $_GET['age'];

$connection = mysql_connect("localhost","root","admin") or die(mysql_error());

mysql_select_db("test") or die(mysql_error());

$query = "INSERT INTO mytable VALUES('$name','$age')";

$result = mysql_query($query);

echo "Data has been Stored in your database";


have a nice day..

11-13-2011, 11:27 AM
thank u mr. ashishchaudhary. it is working. but i need something...
as your code, if i submit data it stores the database successfully. but in the data submission page, the data which i m trying to submit is remaining.


I need it blank after successful submission.

Thank u again.

Fahim Ahmed