Ajax Example

jeeva · July 21, 2008

Hi frnds,

Could you please give me the example for insert and display all inserted values in the same page using ajax?

Thanks

Jeeva

sampleuser · July 21, 2008

Hi,

Plase try the below.i think it will help u. this contains 3 files.one class file for db connection and remaining 2 for ajax and design.

----test.php---

<html>

<head>

var totValid=0;

var assTotValid=5;

function ex(tmpname,type)

{

//alert(tmpname + type);

if(type=='S')

{

if(tmpname.value != '')

{

document.getElementById('_'+tmpname.name).innerHTML = '<img src="ok.gif"><input type="hidden" name="hiddenok" value="1">';

enablebut();

}

else

{

document.getElementById('_'+tmpname.name).innerHTML = '<img src="error.gif">';

}

if(type == 'N')

{

var val = tmpname.value;

if(!isNaN(val) && val!='')

{

document.getElementById('_'+tmpname.name).innerHTML = '<img src="ok.gif"><input type="hidden" name="hiddenok" value="1">';

enablebut();

}

else

{

document.getElementById('_'+tmpname.name).innerHTML = '<img src="error.gif">';

}

function enablebut()

{

var el=document.sample.elements;

var j=0;

for(var i=0;i<el.length;i++)

{

if(el.name=='hiddenok')

{

j++;

}

if(assTotValid == j)

{

el.submit.disabled=false;

}

else

{

el.submit.disabled=true;

}

var url = "populatedata.php";

function handleHttpResponse()

{

if (http.readyState == 4)

{

if(http.status==200)

{

var results=http.responseText;

document.getElementById('divticketInfo').innerHTML = results;

}

function requestempInfo()

{

var vals ="tdate="+document.getElementById("tdate").value+"&name="+document.getElementById("ename").value+"&from="+document.getElementById("from").value+"&to="+document.getElementById("to").value+"&ttype="+document.getElementById("tt").value+"&phno="+document.getElementById("phno").value;

http.open("POST", url, true);

http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

http.onreadystatechange = handleHttpResponse;

http.send(vals);

}

function getHTTPObject()

{

var xmlhttp;

if(window.XMLHttpRequest)

{

xmlhttp = new XMLHttpRequest();

}

else if (window.ActiveXObject)

{

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

if (!xmlhttp){

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

}

return xmlhttp;

}

var http = getHTTPObject(); // We create the HTTP Object

</script>

</head>

<form name="sample" method="" action="">

<table height="10" border="1" width="50%" cellspacing="3" cellpadding="5" align="center">

<th colspan="2">Bus ticket booking</th>

<tr>

<td>Date </td><td><input type="text" name="tdate" id="tdate" size="25" value="<?php echo date('Y-m-d'); ?>" readonly></td>

</tr>

<tr>

<td>Enquiry Name</td><td><span id="_ename"></span><input type="text" name="ename" id="ename" size="25" onkeyup="ex(this,'S');">

</td>

</tr>

<tr>

<td>From</td><td><span id="_from"></span><input type="text" name="from" id="from" size="25" onkeyup="ex(this,'S')">

</td>

</tr>

<tr><td>To</td><td><span id="_to"></span><input type="text" name="to" id="to" size="25" onkeyup="ex(this,'S')"></td></tr>

<tr><td>Travel Type</td><td><span id="_tt"></span>

<select onchange="ex(this,'S')" name='tt' id="tt">

<option value="">-Select-</option>

<option value="air">Air</option>

<option value="train">Train</option>

<option value="bus">Bus</option>

</select>

</td></tr>

<tr><td>Phone Number</td><td><span id="_phno"></span><input type="text" name="phno" id="phno" size="25" onkeyup="ex(this,'N')"></td></tr>

<tr><td colspan="2" align="center "><input type="button" name="submit" value="submit" disabled onclick="requestempInfo()"></td></tr>

</table>

</form>

<div id="divticketInfo"></div>

</html>

----------------------------------------------------------------------------------------------------

test_calss.php

<?php

class dbconnect

{

function test()

{

$h = "192.168.3.42";

$u = "clickjobs";

$p = "click123";

$con = mysql_connect($h,$u,$p) or die(mysql_error());

$db = mysql_select_db('clickjobsnew');

}

function qryexecute($qry)

{

global $db;

$exec = mysql_query($qry);

return $exec;

}

?>

-----------------------------------------------------------------------------------

populatedata.php //using ajax

<?php

//echo "hi";

require_once("test_class.php");

$obj = new dbconnect();

$obj->test();

$qry = "INSERT INTO sample(bdate,name,fromplace,toplace,traveltype,phno) values('".$_POST['tdate']."','".$_POST['name']."','".$_POST['from']."','".$_POST['to']."','".$_POST['ttype']."',".$_POST['phno'].")";

if($_POST['name']!= '' && $_POST['from']!='' && $_POST['to']!='')

{

$obj->qryexecute($qry);

echo "inserted successfully";

}

$selqry = "SELECT * FROM sample";

$res = $obj->qryexecute($selqry);

if($res)

{

echo "<table border=1 align=center width=50%><tr><th colspan=6 align=center>Datas</th></tr>";

echo "<tr><td>Date</td><td>Name</td><td>From</td><td>To</td><td>Travel Type</td><td>Phoneno</td></tr>";

while($row = mysql_fetch_array($res))

{

echo "<tr><td>".$row['bdate']."</td><td>".$row['name']."</td><td>".$row['fromplace']."</td><td>".$row['toplace']."</td><td>".$row['traveltype']."</td><td>".$row['phno']."</td></tr>";

}

echo "</table>";

}

else

{

echo "No Records are available";

}

?>

Sign In

Ajax Example

Recommended Posts

jeeva

Link to comment

Share on other sites

sampleuser

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information