Post Form to MySql Database

ptmuldoon · 09-15-2010, 08: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, 10:00 AM

It's pretty easy with jQuery.

For example, with a form like this:

Code:

<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:

Code:

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

ashishchaudhary · 09-19-2010, 07:09 AM

hay you can use this code also this is very simple..

this is your formfile.html with ajax .

Code:


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

Code:


<?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, 10: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