i have a form that loads a table in a form with a submit button i want that form to display in the same div
below is the code for the getdivision.php
<div id="record"></div>
<form id='form4' action='viewrecord.php' method='POST'>
<table id='table-2'>
<thead>
<th>RATE</th>
<th>LAST NAME</th>
<th>FIRST NAME</th>
<th>DIVISION</th>
<th>WORKCENTER</th>
<th>MENTOR</th>
<th>View</th>
</thead>
<tbody>
<?php
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row[0] . "</td>";
echo "<td>" . $row[1] . "</td>";
echo "<td>" . $row[2] . "</td>";
echo "<td>" . $row[3] . "</td>";
echo "<td>" . $row[4] . "</td>";
echo "<td>" . $row[5] . " " . $row[6] . " " . $row[7] . "</td>"
echo "<td><input type='submit' name='viewrecord' value='".$row[8]."' class='submit- button view-record' /></td>";
echo "</tr>";
}
echo "
<tbody>
</table>
</form>";
here is the ajax code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>
<script>
$("#form4").submit(function(event){
event.preventDefault();
$.post( viewrecord.php, $("#form4").serialize(), function(data){
$("results").html(data);
});
});
</script>
i can not seem to find the problem
form4 is beging generated from a php script and placed in the #result div of the main page could that be the reason some on please help
here is the index.php that contains the results div
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript">
function showdivision(str)
{
if (str=="")
{
document.getElementById("results").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("results").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getdivision.php?q="+str,true);
xmlhttp.send();
}
function viewrecord()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("results").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","viewrecord.php");
xmlhttp.send();
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<?php
$con = mysql_connect("localhost","mykoll_frc","frcfrc");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
?>
<form>
<select name="DIVISIONS" onchange="showdivision(this.value)">
<option value="">Select a Division:</option>
<option value="600">Avionics</option>
<option value="700">Armament</option>
<option value="GMD">GMD</option>
<option value="ADMIN">ADMIN</option>
</select>
<?php
while($row = mysql_fetch_array($mentors))
{
echo "<option value=\"".$row['mentorid']."\">".$row['M_RATE']." ".$row['M_LastName']." ".$row['M_FirstName']."
";
}
?>
</select>
<button type="button" onclick="showall()">View all records</button>
<button type="button" onclick="showallmentors()">View Mentor List</button>
</form>
<br />
<div id="results"><b>info will be listed here.</b></div>
</body>
</html>
the way it is supposed to work is the index.php loads user selects a division results div is populated from the getdivision.php dynamicallly then user can select a record and the record should populate the results div i hope i said that clear
