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 <!-- 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> PHP: <!-- test # 1 --> 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> PHP: <!-- test # 2 --> 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> PHP: <!-- test # 3 --> 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> PHP:
on test 3, this wont actually submit the form but it would redirect to script.php?pro_id=nn instead. as such, $_POST won't be populated at all and you will lose the values that you've been carrying all along. instead, i suggest trying to add an id to the form like id="calendar", then do: // in onChange... var pro_id = document.getElementById('test4').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 PHP: i hope this makes sense
Hi Thanks for responding and the suggestion. I am new to Javascript so I don't understand you suggestion much. But I gave it a try and was not successful I know what I am attempting is possible using a button but that is so clumbsy. The code below is closer to the final product. 1) The form collects input information. 2) The dropdown contains names stored in a database. 3) Selecting the person's name from the dropdown reloads the page causing the select person's time table to display. 4) You can select an appoiintment time and add notes. 5) Not in this code is a submit button to store the appointment and other details in the database. <? include("../play.php");//display dynamic appointment calendar include("../list_play.php");//drop down of names list ?> <!-- 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" 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= "provider_id" id="providerId" onchange="javascript:OnChange();"> <? //display lastname and first name initial provider_first_last_name_display($db_id); ?> </select> </td> </tr> </table> <?php //function display dynamic appointment calendar calendar_event_edit_play($pro_id, $db_host, $db_user, $db_password, $db_id); ?> </form> </body> </html> PHP:
You will need to alter your form tag to look like <form action="<?php $_SERVER['PHP_SELF'];?>" name="calendar" id="calendar" method="POST"> PHP: I added the id="calendar" so that dimitar's suggestion can work ...
what gnp said - assign the id for the form to "calendar". also - a tip - where shorthand is allowed, you can use value="<?=$_POST['name']?>" to output the var (no need to do <?PHP echo $_POST['name']; ?>) another thing you ought to be aware of - XSS. what this means is: never--ever--trust user input to output it on-screen 'as is'. i.e. if somebody submits code like "<script>alert("hi")</script>" as the value of one of your fields, say test1, upon page reload, the browser will actually run the alert natively. of course, the idea is that in a cross side scripting attack a different type of javascript will run on behalf of your domain - loading remote scripts and fetching data that will otherwise be disallowed due to browser security limitations. don't pick-up bad habits - they are hard to shake off.
Hello Thanks for all you responses and suggestion/solutions. 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> PHP: --------------------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> PHP: