SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru
    Join Date
    Oct 2004
    Location
    uk
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    reload page on selection

    Hi guys

    This is my add a job script
    When a user selects a location from the dropdown it refreshes the page and populates the next dropdown with sublocations

    My problems is all the others fields become empty

    I would like it if the page wasnt refreshed

    I would be thankful for any help



    PHP Code:
    <SCRIPT language=JavaScript>
    function 
    reload(form)
    {
    var 
    val=form.location.options[form.location.options.selectedIndex].value;
    self.location='add.php?location=' val ;
    }

    </script> 
    PHP Code:
     <?
     $cat
    =$_POST['location'];
    $subcat=$_POST['sublocation'];
    /*
    If register_global is off in your server then after reloading of the page to get the value of cat from query string we have to take special care.
    To read more on register_global visit.
      http://www.plus2net.com/php_tutorial/register-globals.php
    */
    @$cat=$_GET['location']; // Use this line or below line if register_global is off
    //@$cat=$HTTP_GET_VARS['location']; // Use this line or above line if register_global is off

    ///////// Getting the data from Mysql table for first list box//////////
    $quer2=mysql_query("SELECT DISTINCT location,cat_id FROM location order by location"); 
    ///////////// End of query for first list box////////////



    /////// for second drop down list we will check if category is selected else we will display all the subcategory///// 
    if(isset($cat) and strlen($cat) > 0){



    $quer=mysql_query("SELECT DISTINCT sublocation FROM sublocation where cat_id=$cat order by sublocation"); 
    }else{
    $quer=mysql_query("SELECT DISTINCT sublocation FROM sublocation order by sublocation"); } 
    ////////// end of query for second subcategory drop down list box ///////////////////////////


    /// Add your form processing page address to action in above line. Example  action=dd-check.php////
    //////////        Starting of first drop downlist /////////
    echo "<select name='location' onchange=\"reload(this.form)\">
    <option value=''>------------------------ Please select a Location ---------------------------</option>"
    ;
    while(
    $noticia2 mysql_fetch_array($quer2)) { 
    if(
    $noticia2['cat_id']==@$cat){echo "<option selected value='$noticia2[location]'>$noticia2[location]</option>"."<BR>";}
    else{echo  
    "<option value='$noticia2[cat_id]'>$noticia2[location]</option>";}
    }
    echo 
    "</select></TD></TR><TR><TD><font size=4>Sub Location</td><td>";
    //////////////////  This will end the first drop down list ///////////

    //////////        Starting of second drop downlist /////////
    echo "<select name='sublocation'>
    <option value=''>---------------------- Please select a Sub Location ----------------------</option>"
    ;
    while(
    $noticia mysql_fetch_array($quer)) { 
    echo  
    "<option value='$noticia[sublocation]'>$noticia[sublocation]</option>";
    }
    echo 
    "</select>";
    //////////////////  This will end the second drop down list ///////////


    ?>

  2. #2
    SitePoint Guru
    Join Date
    Oct 2004
    Location
    uk
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    load value with refresh

    Hi guys Is there a way i can load the value without refreshing the page


    When a user selects a location from the dropdown it refreshes the page and populates the next dropdown with sublocations

    My problems is all the others fields become empty

    I would like it if the page wasnt refreshed

    I would be thankful for any help



    PHP Code:
    <SCRIPT language=JavaScript>
    function 
    reload(form)
    {
    var 
    val=form.location.options[form.location.options.selectedIndex].value;
    self.location='add.php?location=' val ;
    }

    </script> 
    PHP Code:
     <?
     $cat
    =$_POST['location'];
    $subcat=$_POST['sublocation'];
    /*
    If register_global is off in your server then after reloading of the page to get the value of cat from query string we have to take special care.
    To read more on register_global visit.
      http://www.plus2net.com/php_tutorial/register-globals.php
    */
    @$cat=$_GET['location']; // Use this line or below line if register_global is off
    //@$cat=$HTTP_GET_VARS['location']; // Use this line or above line if register_global is off

    ///////// Getting the data from Mysql table for first list box//////////
    $quer2=mysql_query("SELECT DISTINCT location,cat_id FROM location order by location"); 
    ///////////// End of query for first list box////////////



    /////// for second drop down list we will check if category is selected else we will display all the subcategory///// 
    if(isset($cat) and strlen($cat) > 0){



    $quer=mysql_query("SELECT DISTINCT sublocation FROM sublocation where cat_id=$cat order by sublocation"); 
    }else{
    $quer=mysql_query("SELECT DISTINCT sublocation FROM sublocation order by sublocation"); } 
    ////////// end of query for second subcategory drop down list box ///////////////////////////


    /// Add your form processing page address to action in above line. Example  action=dd-check.php////
    //////////        Starting of first drop downlist /////////
    echo "<select name='location' onchange=\"reload(this.form)\">
    <option value=''>------------------------ Please select a Location ---------------------------</option>"
    ;
    while(
    $noticia2 mysql_fetch_array($quer2)) { 
    if(
    $noticia2['cat_id']==@$cat){echo "<option selected value='$noticia2[location]'>$noticia2[location]</option>"."<BR>";}
    else{echo  
    "<option value='$noticia2[cat_id]'>$noticia2[location]</option>";}
    }
    echo 
    "</select></TD></TR><TR><TD><font size=4>Sub Location</td><td>";
    //////////////////  This will end the first drop down list ///////////

    //////////        Starting of second drop downlist /////////
    echo "<select name='sublocation'>
    <option value=''>---------------------- Please select a Sub Location ----------------------</option>"
    ;
    while(
    $noticia mysql_fetch_array($quer)) { 
    echo  
    "<option value='$noticia[sublocation]'>$noticia[sublocation]</option>";
    }
    echo 
    "</select>";
    //////////////////  This will end the second drop down list ///////////


    ?>

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi dnbidder2005. Well this requires a lot of different steps, but you want to use AJAX. I can't spell it out for you but I'll give you some tips.

    1. Download Prototype from prototypejs.org
    2. Include it with your project
    3. When the form is submitted trigger it with something like this:
      new Ajax.Request('add.php', {method: 'post', parameters: 'ajax=true&location='+val, onSuccess: function(request) {
      var theOptions=request.responseText;
      var subLocation=document.createElement('select');
      subLocation.innerHTML=theOptions;
      $('location').parentNode.insertBefore(subLocation,$('location').nextSibling);
      }});
    4. Notes: (a) the $() notation is Prototype's shortcut for document.getElementById(). (b) I am adding the newly created select element after the initial select menu, which should have an ID of 'location.'
    5. This means that in your PHP, you should only output the list items, which will be placed inside a newly created select list.
    6. Ideally you would send over the list of options as an array via JSON, and then build the entire list on the client side, for clean separation of code. But you have to start somewhere. In innerhtml's defense however, it is faster, especially with larger lists.
    7. You'll notice that I have an AJAX=true parameter. Your PHP should fork its code based on this parameter's presence. If AJAX=false, then it should echo the '<select>' tags. Otherwise, it shouldn't, as your AJAX code will handle that. This ensures that your site will work even if JavaScript isn't enabled. This is unobtrusive JavaScript.
    8. On that note, your val=form... assignment confused me a bit. It also seems that it ensures that your site won't work with JavaScript disabled. Just a few pointers: Each option element has two handy properties: 'label' and 'value.' The label is what the user sees, the value is what the server sees. When the form is submitted, the value of $_POST['location'] should hold the value that was selected. Are you sure that your extra JavaScript code is necessary? Select menu values could be sent to the server before JavaScript .


    I'm probably missing some fundamental step in there, and I know it's a lot to swallow, but if it's worth it to you, try each step at a time. If you find it interesting, you'll be on your way to writing powerful, unobtrusive web applications. That's what excites me anyway...

  4. #4
    SitePoint Wizard silver trophy kyberfabrikken's Avatar
    Join Date
    Jun 2004
    Location
    Copenhagen, Denmark
    Posts
    6,157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Instead of reloading the page, you could write a piece of javascript code to send an asynchronous request to the server, which would return the data. Then dynamically update the second select-box. This technique is also known as AJAX.

  5. #5
    SitePoint Guru
    Join Date
    Oct 2004
    Location
    uk
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    do u have a example of this kyberfabrikken and how i could integrate this

  6. #6
    SitePoint Guru
    Join Date
    Oct 2004
    Location
    uk
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for that post will look into it

    for the moment though how can i keep the values in the boxes if the page is refreshed?



    PHP Code:
    <SCRIPT language=JavaScript>
    function 
    reload(form)
    {
    var 
    val=form.location.options[form.location.options.selectedIndex].value;
    self.location='add.php?location=' val ;
    }

    </script> 
    PHP Code:
     <?
     $cat
    =$_POST['location'];
    $subcat=$_POST['sublocation'];
    /*
    If register_global is off in your server then after reloading of the page to get the value of cat from query string we have to take special care.
    To read more on register_global visit.
      http://www.plus2net.com/php_tutorial/register-globals.php
    */
    @$cat=$_GET['location']; // Use this line or below line if register_global is off
    //@$cat=$HTTP_GET_VARS['location']; // Use this line or above line if register_global is off

    ///////// Getting the data from Mysql table for first list box//////////
    $quer2=mysql_query("SELECT DISTINCT location,cat_id FROM location order by location"); 
    ///////////// End of query for first list box////////////



    /////// for second drop down list we will check if category is selected else we will display all the subcategory///// 
    if(isset($cat) and strlen($cat) > 0){



    $quer=mysql_query("SELECT DISTINCT sublocation FROM sublocation where cat_id=$cat order by sublocation"); 
    }else{
    $quer=mysql_query("SELECT DISTINCT sublocation FROM sublocation order by sublocation"); } 
    ////////// end of query for second subcategory drop down list box ///////////////////////////


    /// Add your form processing page address to action in above line. Example  action=dd-check.php////
    //////////        Starting of first drop downlist /////////
    echo "<select name='location' onchange=\"reload(this.form)\">
    <option value=''>------------------------ Please select a Location ---------------------------</option>"
    ;
    while(
    $noticia2 mysql_fetch_array($quer2)) { 
    if(
    $noticia2['cat_id']==@$cat){echo "<option selected value='$noticia2[location]'>$noticia2[location]</option>"."<BR>";}
    else{echo  
    "<option value='$noticia2[cat_id]'>$noticia2[location]</option>";}
    }
    echo 
    "</select></TD></TR><TR><TD><font size=4>Sub Location</td><td>";
    //////////////////  This will end the first drop down list ///////////

    //////////        Starting of second drop downlist /////////
    echo "<select name='sublocation'>
    <option value=''>---------------------- Please select a Sub Location ----------------------</option>"
    ;
    while(
    $noticia mysql_fetch_array($quer)) { 
    echo  
    "<option value='$noticia[sublocation]'>$noticia[sublocation]</option>";
    }
    echo 
    "</select>";
    //////////////////  This will end the second drop down list ///////////


    ?>

  7. #7
    SitePoint Wizard silver trophy kyberfabrikken's Avatar
    Join Date
    Jun 2004
    Location
    Copenhagen, Denmark
    Posts
    6,157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Judging from the script you posted, there are a number of things, you would have to absorb before you could build something like this. A better bet would probably be to pick up a canned solution, in form of a library or framework.

    I don't know the currently available libraries enough to make recommendations, since I usually just write the stuff my self. There's a quite comprehensive list at http://ajaxpatterns.org/PHP_Ajax_Frameworks which you can go through. From cursory look at the list, I'd say that the ones, which appear to match your requirements the best are AjaxAC and phpAjaxTags. I've never used either, so I obviously can't vouch for them.


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
  •