DaniWeb Forum Index > Web Development > PHP

Insert record into db by using ajax post method?

Please support our PHP advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Feb 2009

Posts: 83

Reputation: ahmksssv is an unknown quantity at this point

Solved Threads: 7

ahmksssv

Offline

Junior Poster in Training

Insert record into db by using ajax post method?

Feb 26th, 2009

Hi ...

i need to inserting around 20 values...which method is best in ajax post or get..i dont know abt ajax..plz send me ajax registration or small form (which having inserting records into db) ...i can learn by using this....

Thank u..

•

Join Date: Nov 2007

Posts: 596

Reputation: buddylee17 has a spectacular aura about

Solved Threads: 125

buddylee17 buddylee17 is offline

Offline

Posting Pro

Re: Insert record into db by using ajax post method?

Feb 26th, 2009

Here is a simple AJAX form submission using POST. It basically sends the first and last name to the server, and the server outputs the form information and the date on the server. Very simple, but easy to build on.
post.php:

 Help with Code Tags 
 php Syntax (Toggle Plain Text) 
<?php
$FirstName = $_POST['FirstName'];
$LastName = $_POST['LastName'];
$today = date("m/d/Y");
//send output back to page.
echo "Hello $FirstName $LastName. Todays date is $today.";
?>
<?php
$FirstName = $_POST['FirstName'];
$LastName = $_POST['LastName'];
$today = date("m/d/Y");
//send output back to page.
echo "Hello $FirstName $LastName. Todays date is $today.";
?>

html file(name it whatever you want):

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
   var http_request = false;
   function makePOSTRequest(url, parameters) {
      http_request = false;
      if (window.XMLHttpRequest) { // Mozilla, Safari,...
         http_request = new XMLHttpRequest();
         if (http_request.overrideMimeType) {
         	// set type accordingly to anticipated content type
            //http_request.overrideMimeType('text/xml');
            http_request.overrideMimeType('text/html');
         }
      } else if (window.ActiveXObject) { // IE
         try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
         }
      }
      if (!http_request) {
         alert('Cannot create XMLHTTP instance');
         return false;
      }
 
      http_request.onreadystatechange = alertContents;
      http_request.open('POST', url, true);
      http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      http_request.setRequestHeader("Content-length", parameters.length);
      http_request.setRequestHeader("Connection", "close");
      http_request.send(parameters);
   }
 
   function alertContents() {
      if (http_request.readyState == 4) {
         if (http_request.status == 200) {
            //alert(http_request.responseText);
            result = http_request.responseText;
            document.getElementById('myspan').innerHTML = result;            
         } else {
            alert(http_request.status);
         }
      }
   }
 
   function get(obj) {
      var poststr = "FirstName=" + encodeURI( document.getElementById("FirstName").value ) +
                    "&LastName=" + encodeURI( document.getElementById("LastName").value );
      makePOSTRequest('post.php', poststr);
   }
</script>
</head>
<body>
<form action="javascript:get(document.getElementById('myform'));" name="myform" id="myform">
<input type="text" id="FirstName" />
<input type="text" id="LastName" />
<input type="Submit" value="Submit" />
</form>
<div id="myspan">This area will be filled with the servers output after submit is clicked.</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
   var http_request = false;
   function makePOSTRequest(url, parameters) {
      http_request = false;
      if (window.XMLHttpRequest) { // Mozilla, Safari,...
         http_request = new XMLHttpRequest();
         if (http_request.overrideMimeType) {
         	// set type accordingly to anticipated content type
            //http_request.overrideMimeType('text/xml');
            http_request.overrideMimeType('text/html');
         }
      } else if (window.ActiveXObject) { // IE
         try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
         }
      }
      if (!http_request) {
         alert('Cannot create XMLHTTP instance');
         return false;
      }
      
      http_request.onreadystatechange = alertContents;
      http_request.open('POST', url, true);
      http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      http_request.setRequestHeader("Content-length", parameters.length);
      http_request.setRequestHeader("Connection", "close");
      http_request.send(parameters);
   }

   function alertContents() {
      if (http_request.readyState == 4) {
         if (http_request.status == 200) {
            //alert(http_request.responseText);
            result = http_request.responseText;
            document.getElementById('myspan').innerHTML = result;            
         } else {
            alert(http_request.status);
         }
      }
   }
   
   function get(obj) {
      var poststr = "FirstName=" + encodeURI( document.getElementById("FirstName").value ) +
                    "&LastName=" + encodeURI( document.getElementById("LastName").value );
      makePOSTRequest('post.php', poststr);
   }
</script>
</head>
<body>
<form action="javascript<b></b>:get(document.getElementById('myform'));" name="myform" id="myform">
<input type="text" id="FirstName" />
<input type="text" id="LastName" />
<input type="Submit" value="Submit" />
</form>
<div id="myspan">This area will be filled with the servers output after submit is clicked.</div>
</body>
</html>

Try it out and study how it works.

Last edited by buddylee17; Feb 26th, 2009 at 10:48 am.

Lost time is never found again.
- Benjamin Franklin

•

Join Date: Feb 2009

Posts: 83

Reputation: ahmksssv is an unknown quantity at this point

Solved Threads: 7

ahmksssv

Offline

Junior Poster in Training

Re: Insert record into db by using ajax post method?

Feb 27th, 2009

Thank You....
its easy to understand...
is it same for more no.of fields? or is there any other way to send more no.of fields....

•

Join Date: Nov 2007

Posts: 596

Reputation: buddylee17 has a spectacular aura about

Solved Threads: 125

buddylee17 buddylee17 is offline

Offline

Posting Pro

Re: Insert record into db by using ajax post method?

Feb 27th, 2009

Yes, the same for more fields. Basically, if you add a text field into the form, you'll need to update the javascript variable, postr on line 52 above so that it will send the value to the php file.

Also, for better design, the javascript should be placed in an external .js file (for better organization and so it can be cached) and called from the head of the document.

Lost time is never found again.
- Benjamin Franklin

•

Join Date: Feb 2009

Posts: 83

Reputation: ahmksssv is an unknown quantity at this point

Solved Threads: 7

ahmksssv

Offline

Junior Poster in Training

Re: Insert record into db by using ajax post method?

Feb 28th, 2009

•

Originally Posted by buddylee17

Yes, the same for more fields. Basically, if you add a text field into the form, you'll need to update the javascript variable, postr on line 52 above so that it will send the value to the php file.

Also, for better design, the javascript should be placed in an external .js file (for better organization and so it can be cached) and called from the head of the document.

Hi ..

Thank u....i learn a lot from u.....
i cleared my doubt for inserting data....

when i retreiving data from database, how can i get values from php page to html page by using ajax...i mean same concept in reverse formate...

Thank u once again...

•

Join Date: Feb 2009

Posts: 7

Reputation: fskreuz is an unknown quantity at this point

Solved Threads: 1

fskreuz

Offline

Newbie Poster

Re: Insert record into db by using ajax post method?

Mar 8th, 2009

•

Originally Posted by ahmksssv

Hi ..

Thank u....i learn a lot from u.....
i cleared my doubt for inserting data....

when i retreiving data from database, how can i get values from php page to html page by using ajax...i mean same concept in reverse formate...

Thank u once again...

Im kinda more like a beginner at this but i am familliar of using ajax (thanks to marky and the mct team who taught me)

if you try to access the post.php page directly, what prints out in this page is what is forwarded by this script to your page. in short, your page gets the contents of the post.php and display it there.

now to display the data, you must edit the line 52 to meet your query requirements. as soon as this is done, you edit the post.php to get the data and print it on the post.php page. automatically, the script will get the data from the post.php page and displays it to your current page.

example:

you have a page with an item and its button with "get item data" as its value. hidden with that button is a hidden input tag with that item's id. when you click the button, the id is passed to the script which it will then pass to the post.php. then the post.php will display the data you need using that item's id number on the post.php page. then, since its the purpose of ajax, the script will get the data from the post.php page then on to your page.

it's simple as that actually.