function to retrieve url variables using javascript and Jquery?

Question

in my script there a simple list shows links for editing

<ul>
<li><a href="edit.php?id=5" class="edit">click here</a></li>
<li><a href="edit.php?id=5" class="edit">click here</a></li>
<li><a href="edit.php?id=5" class="edit">click here</a></li>
<li><a href="edit.php?id=5" class="edit">click here</a></li>
</ul>

what i need is to read the variable id so i can send it through .ajax call and i tried this function

$(document).ready(function(){
    function getUrlVars() {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1)
                                         .split('&');
        for(var i = 0; i < hashes.length; i++)
        {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars;
     }
     $('.edit').click(function(){
         var test = getUrlVars()["id"];
         alert(test);
     });
});

When I clicked on the link, the alert message shows undefined.

I tried another function:

$(document).ready(function(){
    var urlParams = {};
    (function () {
        var match,
               pl = /\+/g,  // Regex for replacing addition symbol with a space
           search = /([^&=]+)=?([^&]*)/g,
           decode = function(s) { 
               return decodeURIComponent(s.replace(pl, " ")); 
           },
           query  = window.location.search.substring(1);
           while (match = search.exec(query))
               urlParams[decode(match[1])] = decode(match[2]);
     })();
     $('.edit').click(function(){
         var test = urlParams["id"];
         alert(test);
     });
 });

... but even this also shows up the alert message undefined.

`vars.push(hash[0]); vars[hash[0]] = hash[1];` - what for, why do you try to process `vars` both like an array and like an object? — raina77ow, Oct 04 '12 at 12:19
Precisely @raina77ow - I just reviewed a piece of code that was trying to use this function, and I noticed the same thing. Bad code bites even after 4 years I suppose ;) — kamituel, Feb 03 '16 at 11:55

score 3 · Accepted Answer · answered Oct 04 '12 at 12:20

The methods your tried don't take an URL as argument, but parse the current URL parameters (i.e. the URL within your brother). Just modify the first method like this to make it work:

$(function() {
    function getUrlVars(url) {
        var vars = [], hash;
        var hashes = url.slice(url.indexOf('?') + 1).split('&');
        for(var i = 0; i < hashes.length; i++) {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars;
    }
    $('.edit').click(function() {
        var href = $(this).attr("href");
        var test = getUrlVars(href)["id"];
        alert(test);
    });
});

Side note: you could also modify the second one, both of them do the same job.

As everything after the hash (#) is client side (from https://stackoverflow.com/a/12683131) the var "hashes" should be updated to ignore the task symbol #. Suggested: `var url_split_hashtags = window.location.href.slice(window.location.href.indexOf('?') + 1).split('#'); var hashes = url_split_hashtags[0].split('&');` — Wayne Liu, Nov 12 '20 at 09:47

score 2 · Answer 2 · answered Oct 31 '19 at 02:32

You could try this:

JavScript

function getUrlParams() {
    var params = {};
    location.search.replace(/\?/g, '').split('&').forEach(function(item) {
      params[item.split('=')[0]] = item.split('=')[1];
    });
    return params;
}

The function will return an object like this:

{
  firstName: 'Jordan',
  lastName: 'Belfort',
  position: 'The Wolf of Wall Street',
}

Usage

var urlParams = getUrlParams();
alert('Hello ' + urlParams.firstName + ' ' + urlParams.lastName);

Note: There's actually no need to use location.href and split the url at '?', since we can get the whole query string with location.search.

score 1 · Answer 3 · answered Oct 04 '12 at 12:20

1

As an alternative to your problem, why not put the id part of the href into a data parameter and read that? It would save you having to dissect the URL. Try this:

<ul>
    <li><a href="edit.php?id=5" data-id="5" class="edit">click here</a></li>
    <li><a href="edit.php?id=6" data-id="6" class="edit">click here</a></li>
    <li><a href="edit.php?id=7" data-id="7" class="edit">click here</a></li>
    <li><a href="edit.php?id=8" data-id="8" class="edit">click here</a></li>
</ul>

$('.edit').click(function(){
    var id = $(this).data("id");
    alert(id);
});

answered Oct 04 '12 at 12:20

Rory McCrossan

331,213
40
305
339

i used to test in http://jsfiddle.net/ and just work fine but in my script it doesn't work i don't know why ? – Dr.Neo Oct 04 '12 at 12:37
@Dr.Neo are you using the HTML5 doctype? Any errors in the console? – Rory McCrossan Oct 04 '12 at 12:38

score 0 · Answer 4 · answered Oct 04 '12 at 12:18

Try this one:

function getParameterByName( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}

score 0 · Answer 5 · answered Oct 04 '12 at 12:24

0

You almost got it right the first time, you just have to declare vars as object and get rid of vars.push(...).

Here's working example - http://jsfiddle.net/KN9aK/1/show/?id=yoursuperduperid

Source here http://jsfiddle.net/KN9aK/1/

answered Oct 04 '12 at 12:24

WTK

16,583
6
35
45

score 0 · Answer 6 · answered Oct 04 '12 at 12:26

Change it to use an object, not an array.

function getUrlVars() {
    var vars = {}, //<--object
    hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1)
                                     .split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars[hash[0]] = hash[1];  //<--add to the object
    }
    return vars;  //<--return the object
 }

Also you can use window.location.search so you do not have to do that initial slice.

function to retrieve url variables using javascript and Jquery?

6 Answers6

JavScript

The function will return an object like this:

Usage

Linked