PHP5 - AJAX help
Posted on
16th Feb 2014 07:03 pm by
admin
I've been following the tutorial on w2schools (http://www.w3schools.com/php/php_ajax_database.asp) about using AJAX and a database. It's my first time actually using AJAX and I've run into a problem. Nothing seems to be happening
What i'm trying to do is when a user changes on drop down, another is filled out depending on the first
Did you know?Explore Trending and Topic pages for more stories like this.
This is the form
Code:
<!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=iso-8859-1" />
<title>Scouts DB - Members</title>
<link href="../css.css" rel="stylesheet" type="text/css" />
<link href="addmem.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript" src="packsix.js"></script>
<?php include('menu.php'); ?>
<p align="center">Fill out below to add a member</p>
<form id="addmem" name="addmem" method="post" action="/admin/addmem_process.php">
<div id="Personal">
<p align="center">Personal Information</p>
<table width="100%" border="0">
<tr>
<th width="50%" scope="col">First Name </th>
<td width="50%" scope="col"><input name="first_name" type="text" id="first_name" /></td>
</tr>
<tr>
<th>Last Name </th>
<td><input name="last_name" type="text" id="last_name" /></td>
</tr>
<tr>
<th>Membership No. </th>
<td><input name="memebrship_no" type="text" id="memebrship_no" /></td>
</tr>
<tr>
<th>Section</th>
<td><select name="section" id="section" onchange="packsix(this.value)">
<option value="0" selected="selected"> </option>
<option value="1">Beavers</option>
<option value="2">Cubs</option>
<option value="3">Scouts</option>
</select> </td>
</tr>
<tr>
<th>Date of Birth </th>
<td><input name="dob" type="text" id="dob" /></td>
</tr>
<tr>
<th>Gender</th>
<td><select name="gender" id="gender">
<option value="male" selected="selected">Male</option>
<option value="female">Female</option>
</select> </td>
</tr>
<tr>
<th>Religion</th>
<td><input name="riligion" type="text" id="riligion" /></td>
</tr>
<tr>
<th>School</th>
<td><input name="school" type="text" id="school" /></td>
</tr>
<tr>
<th>Ethnicity</th>
<td><input name="ethnicity" type="text" id="ethnicity" /></td>
</tr>
</table>
<br />
</div>
<div id="Contact">
<p align="center">Contact Details</p>
<table width="100%" border="0">
<tr>
<th width="34%" scope="col">Address</th>
<td width="66%" scope="col"><input name="address1" type="text" id="address1" /></td>
</tr>
<tr>
<th> </th>
<td><input name="address2" type="text" id="address2" /></td>
</tr>
<tr>
<th>Town</th>
<td><select name="town" id="town">
<option value="Welwyn Garden City">Welwyn Garden City</option>
<option value="Hatfield">Hatfield</option>
</select>
</td>
</tr>
<tr>
<th>County</th>
<td><input name="county" type="text" id="county" /></td>
</tr>
<tr>
<th>Post Code </th>
<td><input name="postcode" type="text" id="postcode" value="AL7 " /></td>
</tr>
<tr>
<th>Home Tel. No. </th>
<td><input name="home_tel" type="text" id="home_tel" /></td>
</tr>
</table>
</div>
<div id="NOK">
<p align="center">Next of Kin</p>
<table width="100%" border="0">
<tr>
<th width="50%" scope="col">Mother's Name </th>
<td width="50%" scope="col"><input name="mother" type="text" id="mother" /></td>
</tr>
<tr>
<th>Mobile</th>
<td><input name="m_mobile" type="text" id="m_mobile" /></td>
</tr>
<tr>
<th>Father's Name </th>
<td><input name="father" type="text" id="father" /></td>
</tr>
<tr>
<th>Mobile</th>
<td><input name="f_mobile" type="text" id="f_mobile" /></td>
</tr>
<tr>
<th>Other's Name </th>
<td><input name="other" type="text" id="other" /></td>
</tr>
<tr>
<th>Relationship</th>
<td><input name="relationship" type="text" id="relationship" /></td>
</tr>
<tr>
<th>Mobile</th>
<td><input name="o_mobile" type="text" id="o_mobile" /></td>
</tr>
<tr>
<th>Email</th>
<td><input name="email" type="text" id="email" /></td>
</tr>
<tr>
<th>Email</th>
<td><input name="email2" type="text" id="email2" /></td>
</tr>
</table>
</div>
<div id="doc">
<p align="center">Doctor / Medical</p>
<table width="100%" border="0">
<tr>
<th width="34%" scope="col">Doctor</th>
<td width="66%" scope="col"><input name="doctor" type="text" id="doctor" /></td>
</tr>
<tr>
<th>Surgery</th>
<td><input name="daddress" type="text" id="daddress" /></td>
</tr>
<tr>
<th>Tel No. </th>
<td><input name="dtelno" type="text" id="dtelno" /></td>
</tr>
<tr>
<th>Allergies &</th>
<td rowspan="2" valign="top"><textarea name="allergies" id="allergies"></textarea></td>
</tr>
<tr>
<th>Medical</th>
</tr>
<tr>
<th>Special Needs &</th>
<td rowspan="2" valign="top"><textarea name="specialneeds" id="specialneeds"></textarea></td>
</tr>
<tr>
<th> Behavioural Problems </th>
</tr>
</table>
</div>
<div id="scouting">
<p align="center">Scouting Details </p>
<table width="100%" border="0">
<tr>
<th width="47%" scope="row"><span id="pack">Colony / Pack / Troop</span></th>
<td width="53%"><span id="packs">N/A</span></td>
</tr>
<tr>
<th scope="row"><span id="six">Six / Patrol</span></th>
<td><span id="sixes">N/A</span></td>
</tr>
<tr>
<th scope="row">Joined Scouting </th>
<td><input name="joined_scouting" type="text" id="joined_scouting" /></td>
</tr>
<tr>
<th scope="row">Joined Section </th>
<td><input name="joined_section" type="text" id="joined_section" /></td>
</tr>
</table>
</div>
<div id="submit">
<input name="Submit" type="submit" value="Add Member" />
</div>
</form>
</body>
</html>
This is the packsix.js file
Code:
var xmlhttp
function packsix(int)
{
pack(int)
}
function pack(int)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="pack.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
}
and this is the pack.php file
PHP Code:
// JavaScript Document
var xmlhttp
function packsix(int)
{
pack(int)
}
function pack(int)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="pack.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
}
knowing my luck it'll be something simple
Anyone any ideas?
