SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2005
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to create a dynamic URL using info from multiple drop menus?

    Hi guys,

    Hopefully this is the right forum section to ask, if not please move this to the appropriate section.

    _________________________________________________________________

    The situation:

    - I'm using WordPress and am tagging each post with a specific tag, or multiple tags.

    - Having each post tagged it allows me to retrieve posts that only have certain assigned tags.

    For example the following imaginary tag URL:

    PetStore.com/?tag=dog-house+dog+review

    Would return me all posts that have the tags:

    - dog-house
    - dog
    - review


    I have a strict tagging system in place that gives me the option to create for example 4 drop down menus that holds tags to each main tag category of the total of 4 main tag categories.

    What i would like to achieve:

    I would like to have 4 drop menus with a submit button that creates the tag url dynamically from the tag options selected in the drop menus and upon clicking the submit button it would return the tag results page containing posts that have been tagged with the tags selected in the drop menus.

    Example of a selection:

    Menu 1:

    --> dog

    Menu 2:

    --> review

    Menu 3:

    --> dog house

    Menu 4:

    --> $500

    And then when you hit the submit button you will be directed to this tag URL:

    PetStore.com/?tag=dog+review+dog-house+$500

    This page will then present posts that have the combined tag combination of

    - dog
    - review
    - dog house
    - $500


    _________________________________________________________________


    I would really appreciate all the coding suggestions you can throw at me!
    Code examples would be even better for a coding dyslexic like myself.

    Thanks in advance!

  2. #2
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to combine values from several listboxes in one URL and then use location.href to navigate to this URL.

    Here is the working example:

    http://www.jscodetips.com/13.html
    I'm creating trouble-free Apache, PHP, MySQL installer, WITSuite,
    and use it to setup my development environment.
    Demo, support, contact. Questions?

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2005
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much Alex!
    That really helps a lot.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2005
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Alex,

    I've used your code today and for some reason it's not working.

    This is the way i am using it:

    Code:
    <html>
    <head>
    <script>
    document.getElementById('open').onclick = function () {
      // replace mysite with your site url
      var url = 'http://www.google.com/?tag='
        + encodeURI(document.getElementById('select1').value) + '+'
        + encodeURI(document.getElementById('select2').value) + '+'
        + encodeURI(document.getElementById('select3').value) + '+'
        + encodeURI(document.getElementById('select4').value);
      // uncomment following line and comment alert for navigating to the page
      //location.href = url;
     alert(url);
    };
    
    </script>
    </head>
    <body>
     <p>The listboxes contain tags of the site articles.</p>
    
    <select id="select1">
    <option value="dog">dog</option>
    <option value="cat">cat</option>
    </select>
    <select id="select2">
    
    <option value="review">review</option>
    <option value="tutorial">tutorial</option>
    </select>
    <select id="select3">
    <option value="dog-house">dog house</option>
    <option value="cat-house">cat house</option>
    </select>
    <select id="select4">
    <option value="$100">$100</option>
    <option value="$500">$500</option>
    </select>
    
    <button id="open">Open</button>
    
    <p>After clicking the "Open" button it collects tags from all selects and navigates to the url containing all the tags. See code for details.</p>
    
    </body>
    </html>
    Where am i going wrong?

  5. #5
    SitePoint Wizard silver trophybronze trophy Cups's Avatar
    Join Date
    Oct 2006
    Location
    France, deep rural.
    Posts
    6,869
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    This is a JS question nothing to do with PHP.

    This works, though FF3 didn't seem to like the fact that type=text/javascript was not included as an attribute of the script tag.

    Anyhow, you'll get a fuller explanation on the JS forum.
    Code:
    <html>
    <head>
    <script type=text/javascript>
    function openIt(){
      // replace mysite with your site url
      var url = 'http://www.google.com/?tag='
        + encodeURI(document.getElementById('select1').value) + '+'
        + encodeURI(document.getElementById('select2').value) + '+'
        + encodeURI(document.getElementById('select3').value) + '+'
        + encodeURI(document.getElementById('select4').value);
      // uncomment following line and comment alert for navigating to the page
      //location.href = url;
     alert(url);
    };
    
    </script>
    </head>
    <body>
     <p>The listboxes contain tags of the site articles.</p>
    
    <select id="select1">
    <option value="dog">dog</option>
    <option value="cat">cat</option>
    </select>
    <select id="select2">
    
    <option value="review">review</option>
    <option value="tutorial">tutorial</option>
    </select>
    <select id="select3">
    <option value="dog-house">dog house</option>
    <option value="cat-house">cat house</option>
    </select>
    <select id="select4">
    <option value="$100">$100</option>
    <option value="$500">$500</option>
    </select>
    
    <button id="open" onclick="openIt();return false;">Open</button>
    
    <p>After clicking the "Open" button it collects tags from all selects and navigates to the url containing all the tags. See code for details.</p>
    
    </body>
    </html>

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2005
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I initially thought this would need to be done via PHP, if a moderator could move this over to the JS forum i would really appreciate it.

    Thanks for implementing the fix, it now works as it should. Much appreciated!


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
  •