jquery - Changing the href of a button and going to next page

Question

I have created a button on my page that its HTML looks like this:

Now in my JavaScript I have a jQuery that finds that button like this:

 $('.personlistbtn').click(function(e) {
    console.log("inside click event of person list");
    console.log("provider id was this " + provider_id);
    // ????? 
  });

I want to attach some parameters to my href button that posted above so it can go to a new page in my Rails app with those parameters I am passing to it so hopefullu something like this:

<a href="/pharmacy/patients?provider_id=234" >

Notice I attached that ?provider_id=234 to it. How can I do that?

Answer 1

Assuming provider_id is already set elsewhere in your code, this should work:

$('.personlistbtn a').click(function(e) {
    e.preventDefault();
    window.location.assign(this.href + '?provider_id=' + provider_id);
});     

Answer 2

You have to edit the href attr:

 $('.personlistbtn').on('click', function() {
     var $a = $(this).find('a');
     var href = $a.attr('href');
     $a.attr('href', href + '?provider_id=234');
 });

EDIT:

That code will work when clicking on the container div. If you want to attach the parameters when clicking on the anchor, you should do the following:

 $('.personlistbtn').on('click', 'a', function(e) {
     e.preventDefault();
     window.location = $(this).attr('href') + '?provider_id=234';
 });

Answer 3

Try this:

$('.personlistbtn a').click(function (e) {
    e.preventDefault();
    var provider_id = '?provider_id=234'; // this you already have, I just put it to have a value
    var newurl = this.href + '?provider_id=' + provider_id
    window.location.assign(newurl);
});

JSFIDDLE