Hello
This was a great exerecise. I learned alot more how
to use javascript
I have two ways to accomplish the task of having a sticky
form that also display database derived dynamic listing.
The listing search is determined by a dropdown selection.
The idea was also not to use any buttons to enable the
sticky and dynamic listing display.
----------------------solution 1---------------
Uses $_POST to capture values. This form would also process
its data for database storage.
<?
include("../calendar.php");//display dynamic appointment calendar
include("../people_list.php");//drop down of names list
//capture & clean up user input
$test1 = strip_tags(trim($_POST['test1']));
$test1 = preg_replace("/[^a-zA-Z0-9\s,.]+/","",$test1);
$test2 = strip_tags(trim($_POST['test2']));
$test2 = preg_replace("/[^a-zA-Z0-9\s,.]+/","",$test2);
$test3 = strip_tags(trim($_POST['test3']));
$test3 = preg_replace("/[^a-zA-Z0-9\s,.]+/","",$test3);
$pro_id = strip_tags(trim($_POST['pro_id']));
?>
<!-- Note: used for all test removed for this example from test 2 and test2 -->
<!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" xml:lang="en" lang="en">
<head>
<title></title>
<script language="JavaScript" type="text/JavaScript">
<!--
function OnChange()
{
var pro_id = document.getElementById('providerId').getAttribute("value"), calForm = document.getElementById("calendar");
calForm.setAttribute("action", "<?=$_SERVER['PHP_SELF']?>?pro_id=" + pro_id); // change action for form
calForm.submit(); // submit it, keeping POST vars
}
-->
</script>
</head>
<body>
<form action="<?php $_SERVER['PHP_SELF'];?>" name="calendar" id = "calendar" method="POST">
<table>
<tr>
<td width="25%"><input type="text" name="test1" value="<?=$test1?>"/></td>
<td width="25%"><input type="text" name="test2" value="<?=$test2?>"/></td>
<td width="25%"><input type="text" name="test3" value="<?=$test3?>"/></td>
<td>
<select name= "provider_id" id="providerId" onchange="javascript:OnChange();">
<?
//display lastname and first name initial
first_last_name_display($db_id);
?>
</select>
</td>
</tr>
</table>
<?php
//function display dynamic appointment calendar
calendar_play($pro_id, $db_host, $db_user, $db_password, $db_id);
?>
</form>
</body>
</html>
--------------------solution 2 -------------
Passes values via URL and uses $_REQUEST to capture the data.
This approach allows you to use Onchange to reload the same page.
And another script can be used to process the input data into the database.
<?
include("../calendar.php");//display dynamic appointment calendar
include("../people_list.php");//drop down of names list
//capture & clean up user input
$test1 = strip_tags(trim($_REQUEST['test1']));
$test1 = preg_replace("/[^a-zA-Z0-9\s,.]+/","",$test1);
$test2 = strip_tags(trim($_REQUEST['test2']));
$test2 = preg_replace("/[^a-zA-Z0-9\s,.]+/","",$test2);
$test3 = strip_tags(trim($_REQUEST['test3']));
$test3 = preg_replace("/[^a-zA-Z0-9\s,.]+/","",$test3);
$org_pro_id = strip_tags(trim($_REQUEST['pro_id']));
?>
<!-- Note: used for all test removed for this example from test 2 and test2 -->
<!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" xml:lang="en" lang="en">
<head>
<title></title>
<script language="JavaScript" type="text/JavaScript">
<!--
function OnChange()
{
var providerId = document.getElementById('providerId').value;
var test1 = document.getElementById('test1').value;
var test2 = document.getElementById('test2').value;
var test3 = document.getElementById('test3').value;
calForm = document.getElementById("calendar");
calForm.setAttribute("action", "<?=$_SERVER['PHP_SELF']?>?pro_id="+providerId+
"&test1="+test1+"&test2="+test2+"&test3="+test3);
calForm.submit(); // submit it, keeping vars
-->
</script>
</head>
<body>
<form action="process.php" name="calendar" id = "calendar" method="POST">
<table>
<tr>
<td width="25%"><input type="text" name="test1" id = "test1" value="<?=$test1?>"/></td>
<td width="25%"><input type="text" name="test2" id = "test2" value="<?=$test2?>"/></td>
<td width="25%"><input type="text" name="test3" id = "test3" value="<?=$test3?>"/></td>
<td>
<select name= "provider_id" id="providerId" onchange="javascript:OnChange();">
<?
//display lastname and first name initial
first_last_name_display($db_id);
?>
</select>
</td>
</tr>
</table>
<?php
//function display dynamic appointment calendar
calendar_play($pro_id, $db_host, $db_user, $db_password, $db_id);
?>
</form>
</body>
</html>