AJAX

Sticky note refresh not working

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Oct 2006

Posts: 82

Reputation: assgar is an unknown quantity at this point

Solved Threads: 0

assgar

Offline

Junior Poster in Training

Sticky note refresh not working

Jan 13th, 2009

Sticky note refresh not working

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

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<!-- 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>
<!-- 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

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<?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>
<?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

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
 
<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>
<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

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
 
<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>
<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<b></b>:OnChange();">
		<option value="a">A</option>
		<option value="b">B</option>
		<option value="c">C</option>
		</select>
	</td>
  </tr>
</table>
</form>
</body>

Last edited by assgar; Jan 13th, 2009 at 1:20 am.

•

Join Date: Oct 2006

Posts: 82

Reputation: assgar is an unknown quantity at this point

Solved Threads: 0

assgar

Offline

Junior Poster in Training

Re: Sticky note refresh not working

Jan 18th, 2009

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.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
 
<?
 
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>
<?

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<b></b>: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.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
 
<?
 
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>
<?

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<b></b>: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>

Quick Reply to Thread

Show Printable Version

Other Threads in the JavaScript / DHTML / AJAX Forum

Previous Thread: Unknown Javascript error - cannot find what is wrong with my code.
Next Thread: input text

Thread Tools	Search this Thread
Show Printable Version Email this Page

DaniWeb Message

Cancel Changes