coldfusion, javascript onclick url update

I have a page with dropdown. When dropdown selection is made, the url updates. The following code works on IE, but not on Chrome/Firefox.  What am I missing? thanks.

<script>
function nav()
   {
   var w = window.pgnames.selectedIndex;
   var val = window.pgnames.options[w].value; 
   var st = /&pg/;
   var curl = document.URL.search(st);

   if(curl == -1)
                var nurl = document.URL;
   else 
                var nurl = document.URL.substr(0, curl);
   window.location.href = nurl + "&pg="+ val;
   }

</script>

Open in new window



<select name="pgnames" align="absmiddle" onChange="nav()">
<option value="">--- By Practice Group ---</option>
<cfoutput query="getPGNames"><option value="#pgnumber#"<cfif isdefined("pg")><cfif pg EQ #pgnumber#> selected</cfif></cfif>>#PracticeGroup#</option></cfoutput>
</select>

Open in new window

Member_2_7971128Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
_agx_Connect With a Mentor Commented:
 var w = window.pgnames.selectedIndex;
  var val = window.pgnames.options[w].value; 

Open in new window


Instead of that, use DOM syntax.  Give the select list an "ID"

         <select id="pgnames" name="pgnames" ....>

.. and get the selected value with this:

       var list = document.getElementById("pgnames");
       var val  = list.options[list.selectedIndex].value;

Open in new window

1
 
Julian HansenCommented:
You can make your code work by passing the control to the nav function like so
NOTE this passed as parameter in nav()
HTML
<select name="pgnames" align="absmiddle" onChange="nav(this)">
<option value="">--- By Practice Group ---</option>
<cfoutput query="getPGNames"><option value="#pgnumber#"<cfif isdefined("pg")><cfif pg EQ #pgnumber#> selected</cfif></cfif>>#PracticeGroup#</option></cfoutput>
</select> 

Open in new window

JavaScript
<script>
function nav(sel)
{
  var w = sel.selectedIndex;

  var val = sel.options[w].value;
  var st = /&pg/;
  var curl = document.URL.search(st);

  if(curl == -1) {
    var nurl = document.URL;
  }
  else {
    var nurl = document.URL.substr(0, curl);
  }
  
  window.location.href = nurl + "&pg="+ val;
}
</script>

Open in new window

0
 
_agx_Connect With a Mentor Commented:
While both options work, I'd go with Julian's suggestion as it's simpler.
0
 
leakim971PluritechnicianCommented:
you can short your code a bit more :
<select name="pgnames" align="absmiddle" onChange="nav(this.value)">
<option value="">--- By Practice Group ---</option>
<cfoutput query="getPGNames"><option value="#pgnumber#"<cfif isdefined("pg")><cfif pg EQ #pgnumber#> selected</cfif></cfif>>#PracticeGroup#</option></cfoutput>
</select> 

Open in new window


<script>
function nav(val)
{
  var st = /&pg/;
  var curl = document.URL.search(st);

  if(curl == -1) {
    var nurl = document.URL;
  }
  else {
    var nurl = document.URL.substr(0, curl);
  }
  
  window.location.href = nurl + "&pg="+ val;
}
</script>

Open in new window

0
All Courses

From novice to tech pro — start learning today.