Solved

coldfusion, javascript onclick url update

Posted on 2016-11-10
4
73 Views
Last Modified: 2016-11-11
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

0
Comment
Question by:Member_2_7971128
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 52

Accepted Solution

by:
_agx_ earned 500 total points
ID: 41882671
 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
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 41882780
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
 
LVL 52

Assisted Solution

by:_agx_
_agx_ earned 500 total points
ID: 41882784
While both options work, I'd go with Julian's suggestion as it's simpler.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 41883059
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

Featured Post

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Hi, Even though I have created this Tutorial on My personal Blog, Some people might not able to find my website, So here i am posting it again Today, from the topic it is very clear that i will be showing you here the very basic usage of how we …
CFGRID Custom Functionality Series -  Part 1 Hi Guys, I was once asked how it is possible to to add a hyperlink in the cfgrid and open the window to show the data. Now this is quite simple, I have to use the EXT JS library for this and I achiev…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question