I'm working on a little project, and from the php forums, have learned a little bit about the prototype framework, and Ajax. I've good an decent grasp on php, but how to utilize php with javascript is something still new to me.
From this post in the php forums
Here, I was able to successfully query a database, and display the table/results.
Then beneath the table, I have form that via Ajax will display the results of the forms inputs.
Now I'd like to have the table update via ajax on the form submit. Below is the code that I've currently put together.
PHP Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>AJax Testing Script</title>
<script src="prototype.js" type="text/javascript"></script>
<script type="text/javascript">
function liveStuff()
{
var ajax = new Ajax.Updater(
{
success: 'results'
},
'backside_script.php',
{
parameters: $('myForm').serialize(true)
}
);
}
</script>
</head>
<body>
<?
$mysql_hostname = 'localhost';
$mysql_username = 'username';
$mysql_password = 'password';
$conn = mysql_connect($mysql_hostname, $mysql_username, $mysql_password) or die('MySQL error: ' . mysql_errno() . ' ' . mysql_error());
$test = 'test_dual';
// test for conn
mysql_select_db($test) or die('MySQL error: ' . mysql_errno() . ' ' . mysql_error());
$query = mysql_query("SELECT * FROM mydatabases ");
while ($data = mysql_fetch_assoc($query)) {
$dataArray[] = $data;
$rows = count($dataArray);
}
if($rows == 0)
{
echo 'There are no additional tables';
} else {
echo '<table border=1>
<tr>
<td>ID</td>
<td>Database</td>
<td>Table</td>
<td>User Field</td>
<td>Password Field</td>
<td>Email Field</td>
</tr>';
for($x=0; $x < $rows; $x++){
echo '<tr>';
foreach($dataArray[$x] as $key => $value){
echo '<td>'.$value.'</td>';
}
echo '</tr>';
}
echo '<tr><td colspan="6"> Add New Table</td></tr>';
echo '</table>';
}
?>
<form id="myForm" name="myForm" method="post" action="" onsubmit="liveStuff();return false;">
<table border='1'>
<tr><td>Database Name</td><td><input name="input[db_field]" type="text"></input></td></tr>
<tr><td>Table Name</td><td><input name="input[table_field]" type="text"></input></td></tr>
<tr><td>User Field</td><td><input name="input[ufield]" type="text"></input></td></tr>
<tr><td>Password Field</td><td><input name="input[pfield]" type="text"></input></td></tr>
<tr><td>Email Field</td><td><input name="input[efield]" type="text"></input></td></tr>
<tr><td colspan="2"><input name="submit" id="submit" type="submit" value="Submit Ajax"></input></td></tr>
</table>
</form>
<div id="results"></div>
</body>
</html>
Before you post, read our: 
