Sticky note refresh not working

Question

assgar 14 Junior Poster in Training

15 Years Ago

Hello

I am trying to create a sticky form.
I would like to use javascript to refresh the page using drop
down selection to trigger the refresh.

The problem is I cannot get it to work. See test3.

I tried two other example that worked with a submit button and no javascript
See test 1 and test 3.

If you have any suggestions that would be great.

Note:Below you will find 3 tests I used to identify that it is the javascript
that is causing the problem.

Using Win 2003 server, Php, Apache and Mysql.

Thanks

<!-- 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>

The sticky works for this test

<?php
	$test1 = $_POST['test1'];
	$test2 = $_POST['test2'];
	$test3 = $_POST['test3'];
?>


<script language="JavaScript" type="text/JavaScript">
<!--

-->
</script>
</head>
<body>
form  action="<?php $_SERVER['PHP_SELF'];?>" name="calendar" method="POST">
<table>
  <tr>
	<td width="25%"><input type="text" name="test1" value="<? echo $test1; ?>"/></td>
	<td width="25%"><input type="text" name="test2" value="<? echo $test2; ?>"/></td>
	<td width="25%"><input type="text" name="test3" value="<? echo $test3; ?>"/></td>
	<td width="25%"><input type="submit"  value="Submit"/></td>
 </tr>
</table>
</form>
</body>
</html>

The sticky works for this test

<script language="JavaScript" type="text/JavaScript">
<!--
 -->
</script>
</head>
<body>
form  action="<?php $_SERVER['PHP_SELF'];?>" name="calendar" method="POST">
<table>
  <tr>
	<td width="25%"><input type="text" name="test1" value="<? echo $_POST['test1']?>"/></td>
	<td width="25%"><input type="text" name="test2" value="<? echo $_POST['test2']?>"/></td>
	<td width="25%"><input type="text" name="test3" value="<? echo $_POST['test3']?>"/></td>
	<td width="25%"><input type="submit"  value="Submit"/></td>
  </tr>
</table>
</form>
</body>

The sticky does not work for this test

<script language="JavaScript" type="text/JavaScript">
<!--
 function OnChange()
  {
     var proId = document.getElementById('test4').value;
     window.location.href="<?php $_SERVER['PHP_SELF'];?>?pro_id="+ proId;
  }
 -->
</script>
</head>
<body>
form  action="<?php $_SERVER['PHP_SELF'];?>" name="calendar" method="POST">
<table>
  <tr>
	<td width="25%"><input type="text" name="test1" value="<? echo $_POST['test1']?>"/></td>
	<td width="25%"><input type="text" name="test2" value="<? echo $_POST['test2']?>"/></td>
	<td width="25%"><input type="text" name="test3" value="<? echo $_POST['test3']?>"/></td>
	<td>
		<select name="test4" id="test4" onchange="javascript:OnChange();">
		<option value="a">A</option>
		<option value="b">B</option>
		<option value="c">C</option>
		</select>
	</td>
  </tr>
</table>
</form>
</body>

javascript

1 Contributor
1 Reply
136 Views
5 Days Discussion Span
Latest Post 15 Years Ago Latest Post by assgar

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

assgar 14 Junior Poster in Training · Answer 1 · 2009-01-19T00:05:44+00:00

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>