943,669 Members | Top Members by Rank

Ad:
Jan 13th, 2009
0

Sticky note refresh not working

Expand Post »
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


JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <!-- Note: used for all test removed for this example from test 2 and test2 -->
  2. <!DOCTYPE html
  3. PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  4. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <head>
  7. <title></title>

<!-- test # 1 -->
The sticky works for this test

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <?php
  2. $test1 = $_POST['test1'];
  3. $test2 = $_POST['test2'];
  4. $test3 = $_POST['test3'];
  5. ?>
  6.  
  7.  
  8. <script language="JavaScript" type="text/JavaScript">
  9. <!--
  10.  
  11. -->
  12. </script>
  13. </head>
  14. <body>
  15. form action="<?php $_SERVER['PHP_SELF'];?>" name="calendar" method="POST">
  16. <table>
  17. <tr>
  18. <td width="25%"><input type="text" name="test1" value="<? echo $test1; ?>"/></td>
  19. <td width="25%"><input type="text" name="test2" value="<? echo $test2; ?>"/></td>
  20. <td width="25%"><input type="text" name="test3" value="<? echo $test3; ?>"/></td>
  21. <td width="25%"><input type="submit" value="Submit"/></td>
  22. </tr>
  23. </table>
  24. </form>
  25. </body>
  26. </html>

<!-- test # 2 -->
The sticky works for this test

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1.  
  2. <script language="JavaScript" type="text/JavaScript">
  3. <!--
  4. -->
  5. </script>
  6. </head>
  7. <body>
  8. form action="<?php $_SERVER['PHP_SELF'];?>" name="calendar" method="POST">
  9. <table>
  10. <tr>
  11. <td width="25%"><input type="text" name="test1" value="<? echo $_POST['test1']?>"/></td>
  12. <td width="25%"><input type="text" name="test2" value="<? echo $_POST['test2']?>"/></td>
  13. <td width="25%"><input type="text" name="test3" value="<? echo $_POST['test3']?>"/></td>
  14. <td width="25%"><input type="submit" value="Submit"/></td>
  15. </tr>
  16. </table>
  17. </form>
  18. </body>

<!-- test # 3 -->
The sticky does not work for this test

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1.  
  2. <script language="JavaScript" type="text/JavaScript">
  3. <!--
  4. function OnChange()
  5. {
  6. var proId = document.getElementById('test4').value;
  7. window.location.href="<?php $_SERVER['PHP_SELF'];?>?pro_id="+ proId;
  8. }
  9. -->
  10. </script>
  11. </head>
  12. <body>
  13. form action="<?php $_SERVER['PHP_SELF'];?>" name="calendar" method="POST">
  14. <table>
  15. <tr>
  16. <td width="25%"><input type="text" name="test1" value="<? echo $_POST['test1']?>"/></td>
  17. <td width="25%"><input type="text" name="test2" value="<? echo $_POST['test2']?>"/></td>
  18. <td width="25%"><input type="text" name="test3" value="<? echo $_POST['test3']?>"/></td>
  19. <td>
  20. <select name="test4" id="test4" onchange="javascript:OnChange();">
  21. <option value="a">A</option>
  22. <option value="b">B</option>
  23. <option value="c">C</option>
  24. </select>
  25. </td>
  26. </tr>
  27. </table>
  28. </form>
  29. </body>
Last edited by assgar; Jan 13th, 2009 at 1:20 am.
Reputation Points: 24
Solved Threads: 0
Junior Poster in Training
assgar is offline Offline
89 posts
since Oct 2006
Jan 18th, 2009
1

Re: Sticky note refresh not working

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.


JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1.  
  2. <?
  3.  
  4. include("../calendar.php");//display dynamic appointment calendar
  5. include("../people_list.php");//drop down of names list
  6.  
  7.  
  8. //capture & clean up user input
  9. $test1 = strip_tags(trim($_POST['test1']));
  10. $test1 = preg_replace("/[^a-zA-Z0-9\s,.]+/","",$test1);
  11.  
  12. $test2 = strip_tags(trim($_POST['test2']));
  13. $test2 = preg_replace("/[^a-zA-Z0-9\s,.]+/","",$test2);
  14.  
  15. $test3 = strip_tags(trim($_POST['test3']));
  16. $test3 = preg_replace("/[^a-zA-Z0-9\s,.]+/","",$test3);
  17.  
  18. $pro_id = strip_tags(trim($_POST['pro_id']));
  19.  
  20.  
  21. ?>
  22.  
  23. <!-- Note: used for all test removed for this example from test 2 and test2 -->
  24. <!DOCTYPE html
  25. PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  26. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  27. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  28. <head>
  29. <title></title>
  30.  
  31. <script language="JavaScript" type="text/JavaScript">
  32. <!--
  33. function OnChange()
  34. {
  35. var pro_id = document.getElementById('providerId').getAttribute("value"), calForm = document.getElementById("calendar");
  36. calForm.setAttribute("action", "<?=$_SERVER['PHP_SELF']?>?pro_id=" + pro_id); // change action for form
  37. calForm.submit(); // submit it, keeping POST vars
  38. }
  39. -->
  40. </script>
  41. </head>
  42. <body>
  43.  
  44. <form action="<?php $_SERVER['PHP_SELF'];?>" name="calendar" id = "calendar" method="POST">
  45. <table>
  46. <tr>
  47. <td width="25%"><input type="text" name="test1" value="<?=$test1?>"/></td>
  48. <td width="25%"><input type="text" name="test2" value="<?=$test2?>"/></td>
  49. <td width="25%"><input type="text" name="test3" value="<?=$test3?>"/></td>
  50. <td>
  51. <select name= "provider_id" id="providerId" onchange="javascript:OnChange();">
  52. <?
  53. //display lastname and first name initial
  54. first_last_name_display($db_id);
  55. ?>
  56. </select>
  57. </td>
  58. </tr>
  59. </table>
  60.  
  61. <?php
  62. //function display dynamic appointment calendar
  63. calendar_play($pro_id, $db_host, $db_user, $db_password, $db_id);
  64. ?>
  65.  
  66.  
  67. </form>
  68. </body>
  69. </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.


JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1.  
  2. <?
  3.  
  4. include("../calendar.php");//display dynamic appointment calendar
  5. include("../people_list.php");//drop down of names list
  6.  
  7.  
  8. //capture & clean up user input
  9. $test1 = strip_tags(trim($_REQUEST['test1']));
  10. $test1 = preg_replace("/[^a-zA-Z0-9\s,.]+/","",$test1);
  11.  
  12. $test2 = strip_tags(trim($_REQUEST['test2']));
  13. $test2 = preg_replace("/[^a-zA-Z0-9\s,.]+/","",$test2);
  14.  
  15. $test3 = strip_tags(trim($_REQUEST['test3']));
  16. $test3 = preg_replace("/[^a-zA-Z0-9\s,.]+/","",$test3);
  17.  
  18. $org_pro_id = strip_tags(trim($_REQUEST['pro_id']));
  19.  
  20. ?>
  21.  
  22. <!-- Note: used for all test removed for this example from test 2 and test2 -->
  23. <!DOCTYPE html
  24. PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  25. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  26. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  27. <head>
  28. <title></title>
  29.  
  30. <script language="JavaScript" type="text/JavaScript">
  31. <!--
  32. function OnChange()
  33. {
  34. var providerId = document.getElementById('providerId').value;
  35. var test1 = document.getElementById('test1').value;
  36. var test2 = document.getElementById('test2').value;
  37. var test3 = document.getElementById('test3').value;
  38.  
  39. calForm = document.getElementById("calendar");
  40. calForm.setAttribute("action", "<?=$_SERVER['PHP_SELF']?>?pro_id="+providerId+
  41. "&test1="+test1+"&test2="+test2+"&test3="+test3);
  42. calForm.submit(); // submit it, keeping vars
  43. -->
  44. </script>
  45. </head>
  46. <body>
  47.  
  48. <form action="process.php" name="calendar" id = "calendar" method="POST">
  49. <table>
  50. <tr>
  51. <td width="25%"><input type="text" name="test1" id = "test1" value="<?=$test1?>"/></td>
  52. <td width="25%"><input type="text" name="test2" id = "test2" value="<?=$test2?>"/></td>
  53. <td width="25%"><input type="text" name="test3" id = "test3" value="<?=$test3?>"/></td>
  54. <td>
  55. <select name= "provider_id" id="providerId" onchange="javascript:OnChange();">
  56. <?
  57. //display lastname and first name initial
  58. first_last_name_display($db_id);
  59. ?>
  60. </select>
  61. </td>
  62. </tr>
  63. </table>
  64.  
  65. <?php
  66. //function display dynamic appointment calendar
  67. calendar_play($pro_id, $db_host, $db_user, $db_password, $db_id);
  68. ?>
  69.  
  70. </form>
  71. </body>
  72. </html>
Reputation Points: 24
Solved Threads: 0
Junior Poster in Training
assgar is offline Offline
89 posts
since Oct 2006

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Unknown Javascript error - cannot find what is wrong with my code.
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: input text





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC