Get parameter values from href in jquery

Question

Script

 <a href="#?cat=MT&typ=1" data-reveal-id="reveal_popup" onclick="pop();" data-closeonbackgroundclick="false" data-dismissmodalclass="close-reveal-modal">due today</a>
 <a href="#?cat=MT&typ=2" data-reveal-id="reveal_popup" onclick="pop();" data-closeonbackgroundclick="false" data-dismissmodalclass="close-reveal-modal">due in 2 days</a>

 <div id="reveal_popup" class="reveal-modal">
 <div id="popup"></div>
 <a class="close-reveal-modal">&#215;</a>
 </div>

function pop() {

 var cat=**value of cat parameter in href**
 var type=**value of typ parameter in href**

 $.ajax({
       type:'post',
       url:site_url()+'/event/deleteEventSingle',
       data:{'cat':cat,'type':typ},
        async:false,
         success:function(result){}
        });
}

In this when the user clicks a href same popup appears with different data. there are more than 10 hrefs actually and i am trying to show a calender with user inputted data in the popup. This depends on two parameters cat and typ as shown in href.

Requirement

Every href has its own cat and typ values. When a href is clicked I want the cat and typ values of the clicked href to be get using jquery so that i can pass these variables in ajax.

var cat=**value of cat parameter in href**
var type=**value of typ parameter in href**

Tried

How to get the parameters of an href attribute of a link from the click event object

i suggest you use data-* attributes. like this ` <a href="#" data-reveal-id="reveal_popup" onclick="pop();" data-closeonbackgroundclick="false" data-dismissmodalclass="close-reveal-modal" data-category="MT" data-cat-type="1">due today</a> `. — Ravi Gadag
– Ravi Gadag, Commented Apr 3, 2013 at 6:58

Jaya Mayu · Accepted Answer · 2013-04-03 07:11:21Z

17

You can do as soeme thing as below

$('a').bind('click',function(){
    var url = ($(this).attr('href'));
    var cat = getURLParameter(url, 'cat');
    var typ = getURLParameter(url, 'typ');
    //calling the ajax function
    pop(cat, typ)
});


function getURLParameter(url, name) {
    return (RegExp(name + '=' + '(.+?)(&|$)').exec(url)||[,null])[1];
}

function pop(cat, typ) {

    $.ajax({
       type:'post',
       url:site_url()+'/event/deleteEventSingle',
       data:{'cat':cat,'type':typ},
        async:false,
         success:function(result){}
    });
}

Check out the the example at Live fiddle http://jsfiddle.net/mayooresan/aY9vy/

edited Apr 3, 2013 at 7:11

answered Apr 3, 2013 at 7:05

Jaya Mayu

17.3k35 gold badges116 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jaya Mayu Over a year ago

did you check the fiddle when you click on the link it returns the correct value..

Hetal1311 Over a year ago

Can you Please have the same without ajax I asked the same in Below Link Please help me out stackoverflow.com/questions/45663358/…

Gaurav · Accepted Answer · 2014-03-24 12:19:33Z

7

Try this :

function getUrlParams(url) {
    var params = {};
    url.substring(1).replace(/[?&]+([^=&]+)=([^&]*)/gi,
            function (str, key, value) {
                 params[key] = value;
            });
    return params;
}

Usage:

function pop(e) {
     var url = $(e.target).attr("href");
     var params = getUrlParams(url); 

     var cat= params["cat"];
     var type= params["typ"];

     alert(cat);
     alert(type);    
}

Working Fiddle

edited Mar 24, 2014 at 12:19

answered Apr 3, 2013 at 6:57

Gaurav

8,49714 gold badges57 silver badges91 bronze badges

2 Comments

Avinash Over a year ago

i am getting value as undefined when i alert cat

The Thirsty Ape Over a year ago

Is the substring call needed? Seems to me its just bypassing the # portion of the URL in your demo.

Collectives™ on Stack Overflow

Get parameter values from href in jquery

Script

Requirement

Tried

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Script

Requirement

Tried

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related