Retrieving ID parameter from URL in javascript

Question

I am looking for a little help in trying to retrieve the ID from an URL using JavaScript. I have a main menu system which looks like this

<section id="menu">
 <ul id="main">
  <li id="first"><a href="index.html">Home</a></li>
  <li><a href="Tables.html">League Tables</a><span class="darrow">&#9660;</span>
  <ul class="sub1">
    <li><a href="Tables.html?id=DivP">Premier Division</a></li>
    <li><a href="Tables.html?id=Div1">Division 1</a></li>
    <li><a href="Tables.html?id=Div2A">Division 2A</a></li>
    <li><a href="Tables.html?id=Div2B">Division 2B</a></li>
    <li><a href="Tables.html?id=Div2C">Division 2C</a></li>
    <li><a href="Tables.html?id=Div2D">Division 2D</a></li>
  </ul>
  </li>
 <li><a href="Fixtures.html">Fixtures/Results</a></li>                  
 <li><a href="ClubContacts.html">Club Contacts</a></li>
 <li><a href="TalkinBaws.html">Talkin' Baws</a></li>
 <li><a href="ContactUs.html">Contact Us</a></li>
</ul>
</section>

In the tables page I already have some JavaScript(code added at the end) running using the document.ready() which hides all the divisions from 1 - 2D and displays only the premier. When on the tables page i have added a second menu list which shows and hides the divisions based on the users selection using IDs and the .hide()/.show() from JavaScript

<ul>
 <li><a href="#" id='showDivP'>Premier Division</a></li>
 <li><a href="#" id='showDiv1'>Division 1</a></li>
 <li><a href="#" id='showDiv2A'>Division 2A</a></li>
 <li><a href="#" id='showDiv2B'>Division 2B</a></li>
 <li><a href="#" id='showDiv2C'>Division 2C</a></li>
 <li><a href="#" id='showDiv2D'>Division 2D</a></li>
</ul>

This list is working using the .click(), however the problem I am having is that I want the page to load the desired division depending on the selection made from the main menu.

For example, if the user is on the home page and tries to go directly to Division 2B through the main menu and I am wondering how I can get the ID from the anchor tag in the URL (a href="Tables.html?id=Div2B") in order to display the correct division when the page is loaded.

This is the JavaScript I have already:

$("document").ready(function()
{

$('#DivP').show();
$('#Div1').hide();
$('#Div2A').hide();
$('#Div2B').hide();
$('#Div2C').hide();
$('#Div2D').hide();

$('#showDivP').click(function()
{
    $('#DivP').show();
    $('#Div1').hide();
    $('#Div2A').hide();
    $('#Div2B').hide();
    $('#Div2C').hide();
    $('#Div2D').hide();
});

$('#showDiv1').click(function()
{
    $('#DivP').hide();
    $('#Div1').show();
    $('#Div2A').hide();
    $('#Div2B').hide();
    $('#Div2C').hide();
    $('#Div2D').hide();
});
$('#showDiv2A').click(function()
{
    $('#DivP').hide();
    $('#Div1').hide();
    $('#Div2A').show();
    $('#Div2B').hide();
    $('#Div2C').hide();
    $('#Div2D').hide();
});
$('#showDiv2B').click(function()
{
    $('#DivP').hide();
    $('#Div1').hide();
    $('#Div2A').hide();
    $('#Div2B').show();
    $('#Div2C').hide();
    $('#Div2D').hide();
});
$('#showDiv2C').click(function()
{
    $('#DivP').hide();
    $('#Div1').hide();
    $('#Div2A').hide();
    $('#Div2B').hide();
    $('#Div2C').show();
    $('#Div2D').hide();
});
$('#showDiv2D').click(function()
{
    $('#DivP').hide();
    $('#Div1').hide();
    $('#Div2A').hide();
    $('#Div2B').hide();
    $('#Div2C').hide();
    $('#Div2D').show();
});


});

My apologies if this is seen a duplicate question but I am yet to find a definitive answer that I can understand and work with.

Thanks for any help

FYI, you can do this `$('#DivP, #Div1, #Div2B, #Div2C').hide()` instead of on separate lines ;) — ann0nC0d3r, Jan 19 '16 at 17:21

score 4 · Accepted Answer · edited May 23 '17 at 11:52

4

To get the GET parameters of an url in jquery you can use the following function:

Found on this blog: here, and this question: Get url parameter jquery Or How to Get Query String Values In js.

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};

And this is how you can use this function in your case,
Tables.html?id=Div2B.

var id = getUrlParameter('id');

edited May 23 '17 at 11:52

Community

1
1

answered Jan 19 '16 at 17:24

Niki van Stein

10,564
3
29
62

2

And then triggering it is as simple as `$('#show' + id).trigger('click')` – Joseph Marikle Jan 19 '16 at 17:26
@JosephMarikle your trigger doesn't seem to work :( and looks like it is being skipped in the javascript. I have added the code to my js file and all seems well other than the trigger. sorry if I am being stupid but this is all newish to me. – Shieldsy147 Jan 19 '16 at 18:04
It should work. As long as the trigger call is after the `getUrlParameter` call and after you've added your click event listeners to the second list of links it should trigger it just fine. Can you post some of the code somewhere (pastebin or jsfiddle)? – Joseph Marikle Jan 19 '16 at 18:10
I have added my javascript file to pastebin [link](http://pastebin.com/w9gj2Fm4) hopefully this will help but i don't understand what you mean about the second list click listeners i thought this was already the case with the $showDivX.click(function()) – Shieldsy147 Jan 19 '16 at 18:17
@JosephMarikle I was being stupid lol I moved it to the bottom of the JS file and all is working now sorry about that. I was unsure about what you meant by the click listeners but I get it now. Thanks for all the help ;) – Shieldsy147 Jan 19 '16 at 18:25

score 3 · Answer 2 · answered Jan 19 '16 at 17:22

3

To get the id attribute of the anchor that was clicked...

$('a').on('click', function(){
    var id = $(this).attr('id');
    console.log(id);
});

To get the id from the href attribute...

$('a').on('click', function(){
    var href = $(this).attr('href');
    var id = href.split('id=')[1];
    console.log(id);
});

answered Jan 19 '16 at 17:22

ann0nC0d3r

316
1
11

1

this answer makes more sense to a beginner. :) – Daniel PurPur Jan 19 '16 at 17:27
1

"how I can get the ID from the anchor tag in the URL". OP doesn't want to get it from an anchor tag. He want's to get it from the URL parameter that is passed my clicking on the main menu link. – Joseph Marikle Jan 19 '16 at 17:28
@JosephMarikle... I'll wait for OP to respond. I think given their lack of experience, this could be interpretted in diff ways. Will update my answer depending on OP's response. NB: I've read alot of questions using wording that is meant to ask something but meant somthing completely different ;) – ann0nC0d3r Jan 19 '16 at 17:30
Im guessing the OP is myself lol.. But @JosephMarikle is correct in that i am looking to use the URL and not straight from the a tag as the divisions maybe selected from any of the other pages available. – Shieldsy147 Jan 19 '16 at 17:34
Haha, yep that's you :) Ok, I see. Nice one @JosephMarikle! – ann0nC0d3r Jan 19 '16 at 17:37

Retrieving ID parameter from URL in javascript

2 Answers2