ajax based input form in php

In this example, we create an ajax based input form. The form is not submitted to the server, rather, its values are stored in the database using ajax without submitting form.

default.php

<html>
<head>
<title></title>

<script type="text/javascript" src="ajax_javascript.js"></script>
</head>
<body>
<form id="frm" name="frm" method="post" action="">
<table border="1">
<tr>
<td>City</td>
<td><input id="txtcity" name="txtcity" type="text"></td>
</tr>
<tr>
<td>Address</td>
<td>
<textarea id="txtadd" name="txtadd"></textarea>
</td>
</tr>

<tr>
<td colspan="2">
<input id="btn" name="btn" value="click" onclick="ShowMessage(1);" type="button">
</td>
</tr>

<tr>
<td colspan="2">
<label id="label1"></label>
</td>
</tr>

</table>
</form>
</body>
</html>

ajax_javascript.js

function ShowMessage(id)
{

xmlHttp=GetXmlHttpObject();

var city = document.getElementById("txtcity").value;
var address = document.getElementById("txtadd").value;


if (xmlHttp==null)
{
  alert ("Your browser does not support AJAX!");
  return;
} 

xmlHttp.open("POST", "ajax_file.php", true);

///////// Function getting values back from php file /////////////////////////
xmlHttp.onreadystatechange=function() 
{ 
  if (xmlHttp.readyState==4)
  {
    var response = xmlHttp.responseText;	
    
    
    document.getElementById("label1").innerHTML=response;

  }
} 


// Make our POST parameters string…
  var params = "operation=insert" + 
                "&city=" + encodeURI(city) +             
                "&address=" + encodeURI(address); 

  // Set our POST header correctly…
  xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlHttp.setRequestHeader("Content-length", params.length);
  xmlHttp.setRequestHeader("Connection", "close");

  // Send the parms data…
  xmlHttp.send(params);  
}




///////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////// Return the appropriate Ajax object  //////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}
//=======================================================================================

ajax_file.php

<?php
include("db/opendb.php");
//include("include/functions.php");

if(isset($_POST['id']))
{
$id = $_POST['id'];	
$query = "select * from stdrecord where stdid=".$id;
$stmt = $conn -> prepare($query);
$stmt -> execute();

$str = "<table border='1'>";


while($row = $stmt->fetch())
{
$str = $str . "<tr><td>$row[0]</td><td>$row[1]</td></tr>";
}
$str = $str . "</table>";


echo $str;
$conn = NULL;
}


if(isset($_POST['operation']))
{

$city = $_POST['city'];
$address = $_POST['address'];

//htmlspecialchars(addslashes(trim($_POST['city'])));	
//$address = htmlspecialchars(addslashes(trim($_POST['address'])));	


$query = "insert into stdrecord(city, address) values(:city, :address)";
$stmt = $conn -> prepare($query);
$stmt -> bindParam(':city',$city);
$stmt -> bindParam(':address',$address);
try
{
$stmt -> execute();
$msg = "Record inserted";
}
catch(PDOException $e)
{
$msg = $e -> getMessage();	
}
$conn = NULL;
echo $msg;

}
?>

 

Tags:,

Add a Comment

Your email address will not be published. Required fields are marked *