SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2007
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool 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


    Code:
    <!-- 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>
    <!-- test # 1 -->
    The sticky works for this test

    Code:
    <?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&#37;"><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>
    <!-- test # 2 -->
    The sticky works for this test

    Code:
    <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>
    <!-- test # 3 -->
    The sticky does not work for this test

    Code:
    <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>

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the following code may be the cause:

    Code Javascript:
    onchange="javascript:OnChange();"

    remove the javascript:


  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2007
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


    PHP Code:

    <?

    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.


    PHP Code:

    <?

    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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •