...

View Full Version : Post Form to MySql Database



ptmuldoon
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?

Thanks
PT

Spudhead
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>
</select>
<input type="submit" value="Submit">
</form>

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">
$(function(){
$('#fmExample').submit(function(){
var objForm = $(this);
var form_values = objForm.serializeArray();
$.post('response.php', form_values, function(response){
$('<p>'+ response +'</p>').insertAfter(objForm);
});
return false;
});
});
</script>

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/).

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

this is your formfile.html with ajax .





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

<script type="text/javascript">



function store()
{


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


if(window.XMLHttpRequest)
{

xmlhttp = new XMLHttpRequest();
}
else
{

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

xmlhttp.onreadystatechange=function()
{

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);
xmlhttp.send();

}

</script>


</head>

<body>

<form name="form1">

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

</form>



</body>
</html>



and this is your mydatabase.php file..





<?php


$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..

myfahim
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.

http://www.mediafire.com/?b586o95f89h5q8r

I need it blank after successful submission.

Thank u again.

Fahim Ahmed



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum