newbie javascript problem

c_martini · #1 Sep 6th, 2007, 12:49

I have been asked to alter some navigation element links on a site that will steer users to relevant content depending on which country they select in a select menu. I would like to use javascript to do this but i'm not sure the way to go about it.

This is an example of markup I have to work with:

Code: Select all

    <select name="s_coco" class="dropdown">
        <option value="all" selected="selected">all countries</option>
        <option value="uk">uk</option>
        <option value="uk">us</option>
   </select>
            
    <ul>
        <li><a href="http://www.mysite.com/search/category1/all" title="">category1</a></li>
    </ul>

I would like to change the value on the end of the url in the link of the li. if the user selects 'uk' in the select menu, then the 'all' on the end of the link changes to uk without reloading the page. I only know very basic javascript and how to set variables.

I was thinking to use an onSelect event in each option tag to set/change the value of the variable that would be somehow called at the end of the link url in the li

Any ideas on how to do this?

Rakuli · #2 Sep 6th, 2007, 13:03

Okay, this would be pretty simple I believe

if you add id="s_coco" to the select tag and id="links_list" to ul tag.

the at some point after the </ul>

add

Code: Select all

 
<script type="text/javscript">
 
var countryChooser = document.getElementById('s_coco');
var linksList = document.getElementById('links_list');
 
countryChooser.onchange = function () {
var country = this.options[this.selectedIndex].value;
 
var links = linksList.getElementsByTagName('a');
 
for (i = 0; i < links.length; i++) {
    links[i].href = links[i].href.substr(0, links[i].href.indexOf('/', (links[i].href.length - 4) + 1))) + country;
}
 
};
</script>

c_martini · #3 Sep 6th, 2007, 13:52

Thanks for the help Rakuli,

It does not seem to be working for me though in that the end of the link does not change on the fly. Maybe i'm missing something:

Code: Select all

    <select name="s_coco" id="s_coco" class="dropdown">
        <option value="all" selected="selected">all countries</option>
        <option value="">---------------</option>
        <option value="uk">uk</option>
        <option value="uk">us</option>
   </select>
            
    <ul id="links_list">
        <li><a href="http://www.mysite.com/search/category1/all" title="">category1</a></li>
    </ul>
    
<script type="text/javscript">
 
var countryChooser = document.getElementById('s_coco');
var linksList = document.getElementById('links_list');
 
countryChooser.onchange = function () {
var country = this.options[this.selectedIndex].value;
 
var links = linksList.getElementsByTagName('a');
 
for (i = 0; i < links.length; i++) {
    links[i].href = links[i].href.substr(0, links[i].href.indexOf('/', (links[i].href.length - 4) + 1))) + country;
}
 
};
</script>

Rakuli · #4 Sep 6th, 2007, 14:14

Sorry mate

I misspelt javascript ... lmao

Code: Select all

  <select name="s_coco" id="s_coco" class="dropdown">
        <option value="all" selected="selected">all countries</option>
        <option value="">---------------</option>
        <option value="uk">uk</option>
        <option value="uk">us</option>
   </select>
            
    <ul id="links_list">
        <li><a href="http://www.mysite.com/search/category1/all" title="">category1</a></li>
    </ul>
    
<script type="text/javascript">
 
var countryChooser = document.getElementById('s_coco');
var linksList = document.getElementById('links_list');
 
countryChooser.onchange = function () {
var country = this.options[this.selectedIndex].value;
 
var links = linksList.getElementsByTagName('a');
 
for (i = 0; i < links.length; i++) {
    links[i].href = links[i].href.substr(0, links[i].href.indexOf('/', (links[i].href.length - 4) )+ 1) + country;
}
 
};
</script>

c_martini · #5 Sep 6th, 2007, 14:18

Quote:

Originally Posted by Rakuli

Sorry mate

I misspelt javascript ... lmao

Ooh, I hadn't caught that... Now corrected but I still cannot get it to work...

Rakuli · #6 Sep 6th, 2007, 14:24

That exact script above (directly above your post) works for me in FF and IE.

Are you adding anything else to it?

c_martini · #7 Sep 6th, 2007, 14:33

Quote:

Originally Posted by Rakuli

That exact script above (directly above your post) works for me in FF and IE.

Are you adding anything else to it?

Hmm , no go for me in any browser. I have not altered anything. So that script is supposed to change the 'all' on the end of the link url to 'uk' or 'us' on the fly when either of those are selected in the drop down?

So instead of:

href="http://www.mysite.com/search/category1/all"
the link would change to:
href="http://www.mysite.com/search/category1/uk"
or:
href="http://www.mysite.com/search/category1/us"

?

c_martini · #8 Sep 6th, 2007, 14:42

Sorry, I repasted the amended code you corrected to my html and it works now..

Many thanks for your help!

c_martini · #9 Sep 6th, 2007, 15:55

Actually I had another idea. I think for my purposes rather than the javascript counting the number of '/' and adding/appending the variable to the end of the link, would it be difficult to have it look for a string or something in the url and replacing it? The reason I ask is the url I gave in the example will most definately not always be the same length or path so this javascript just breaks the link if its not always the same length as the example...

Rakuli · #10 Sep 6th, 2007, 16:07

What that script is actually doing is finding the very last '/' and removing what is after it replacing it with the country code. So if there will always be a /language it will always work.

Cheers

c_martini · #11 Sep 7th, 2007, 08:19

Quote:

Originally Posted by Rakuli

What that script is actually doing is finding the very last '/' and removing what is after it replacing it with the country code. So if there will always be a /language it will always work.

Cheers

Thats fine then. I can amend my links so they work with this script. Thanks for all your help!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Newbie to Javascript	dapirates	JavaScript Forum	5	Mar 11th, 2008 21:21
Javascript newbie	sehrlund	JavaScript Forum	6	Aug 23rd, 2007 18:07
Newbie, Please help with javascript links	lea	JavaScript Forum	1	Nov 9th, 2006 14:45
Newbie in Javascript	ktsirig	JavaScript Forum	1	Mar 12th, 2006 05:20
JavaScript Newbie Seeks Guidance	jswebdev	JavaScript Forum	0	Dec 5th, 2005 20:44

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
newbie javascript problem