How to get link href attribute parameters from click event object

Question

Is there an easy way to get the parameters at the end of the href attribute of a clicked link using a click event object?

I have jQuery code that looks like this:

$(document).ready(function() { $('#pages').delegate("a", "click", function(e) { var formData = "parameters to clicked link"; $.ajax({ url: 'friends2.php', dataType: 'json', data: formData, success: function(data) { $('#searchbutton').attr("disabled", false); $('#searchresults').html(data.results); $('#pages').html(data.paginate); } });//ajax end return false; }); }); 

And here is the relevant HTML:

 <div id="pages"> <span class="disabled">previous</span> <span class="current">1</span> <a href="friends.php?term=ma&p=2">2</a> </div> 

I am trying to paginate the search results that I did with ajax. The search runs fine and gets a list of users matching the query. The result part of the script that creates the page links also works.

In the above example, there are two pages of results. What I want to do when the user clicks the link to go to page 2 of the results is to intercept the link and instead create a new ajax request using term=ma&p=2 as the data passed to the request.

So, a long story, is there an easy way to get term=ma&p=2 from an event object that passed an anonymous function in my jQuery above?

Answer 1

You can use this.href method to read the link attribute:

 $('#pages').delegate("a", "click", function(e) { var str = this.href.split('?')[1]; 

Example:

 str = 'friends.php?term=ma&p=2'; console.log(str.split('?')[1]); // output: term=ma&p=2 

Answer 2

Yes, you can use the .search property of the link ...

 alert( this.search ); 

---

DEMO: http://jsfiddle.net/sHqmF/

---

To get rid of ? , just .slice() is ...

 this.search.slice(1) 

---

DEMO: http://jsfiddle.net/sHqmF/1/

Answer 3

Development of the Sarfraz answer given by the anchor

 <a class="the_link" href="http://www.example.com/?a=1&date=2014-7-30&cat=all">click here</a> 

You can get request parameters

 jQuery(document).ready(function($) { $('a.the_link').click(function(){ // when clicking on the link var href = $(this).attr('href'); // get the href of the anchor var params = get_params_from_href(href); console.log(params); // OUTPUT: [a: "1", date: "2014-7-30", cat: "all"] return false; // optional. do not navigate to href. }); function get_params_from_href(href){ var paramstr = href.split('?')[1]; // get what after '?' in the href var paramsarr = paramstr.split('&'); // get all key-value items var params = Array(); for (var i = 0; i < paramsarr.length; i++) { var tmparr = paramsarr[i].split('='); // split key from value params[tmparr[0]] = tmparr[1]; // sort them in a arr[key] = value way } return params; } } 

Answer 4

jQuery itself does not support URL parsing. However, there are many jQuery extensions available that do and make this an easy task. for example

• https://github.com/allmarkedup/jQuery-URL-Parser

With this extension you can do the following

 $('#pages').delegate("a", "click", function(e) { var href = $(this).attr('href'); var url = $.url(href); var query = url.attr('query') ... }); 

The extension itself supports much more than just a query string. You can use attr for almost every part of the URL.