Select Dropdown change URL

7 posts by 3 authors in: Forums > CMS Builder
Last Post: August 14, 2014   (RSS)

By KCMedia - August 6, 2014

Hi Guys

i have this drop down that is working perfect on desktop browsers that when you select the drop down it will redirect you to the new page filtered results but on mobile devices it just dosnt work any ideas why?

                        <form>
                        <select name="filter" id="filter" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO">
                                <option value="">SEARCH BY CATEGORY</option>
                                <option value="news.php">All News</option>
                                <option value="news.php?events=1">Events</option>
                                <option value="news.php?news=1">News</option>
                                <option value="news.php?community=1">Community</option>
                            </select>
                          </form>

Thanks



Craig

KC Media Solutions

www.kcmedia.biz

By Djulia - August 13, 2014

Hi Craig,

Can you try this :

<form name="form">
<select name="filter" id="filter" onchange="parent.document.location.href=document.form.filter[document.form.filter.selectedIndex].value">
<option value="#">SEARCH BY CATEGORY</option>
<option value="news.php">All News</option>
<option value="news.php?events=1">Events</option>
<option value="news.php?news=1">News</option>
<option value="news.php?community=1">Community</option>
</select>
</form>

Thanks!

Djulia

By KCMedia - August 13, 2014

Hi Djulia

thanks i tried that but the drop down wont even work now on desktop if i select an option.

Thanks



Craig

KC Media Solutions

www.kcmedia.biz

By gregThomas - August 14, 2014

Hi Craig,

What about using JQuery instead? 

<html>
  <head>
  </head>
  <body>
    <form>
      <h1>Redirect script</h1>
      <select id="goTo" name="goTo" >
        <option value="" >-- Please Select--</option>
        <option value="http://google.com" >Google</option>
      </select>
    </form>
  </body>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
      $( document ).ready(function() {
        $( "#goTo" ).change(function() {
          var address = $(this).val();
          window.location.replace(address);
        });
      });
    </script>
</html>

Thanks!

Greg

Greg Thomas







PHP Programmer - interactivetools.com

By KCMedia - August 14, 2014

Hi Greg

that dosnt work either, when i do that the desktop stops working and when you select an option in the drop down it just wont do anything.

the only one that works is the current code i have in the code i first posted but that just wont work with mobiles or tablets, but works perfect with desktop browsers, the site is responsive.

Thanks



Craig

KC Media Solutions

www.kcmedia.biz

By gregThomas - August 14, 2014

I'm guessing there is a JS error somewhere that only happens on the mobile version of the site. 

Have you got a link I can look at that demonstrates the error?

Cheers,

Greg

Greg Thomas







PHP Programmer - interactivetools.com