Add javascript var to href

Question

I have dropdown with different links, before that i have 2 radio buttons where you could select "mode".

<div class="radio">
  <label><input type="radio" name="mode" checked="checked" value="mode1">MODE1</label>
</div>
<div class="radio">
  <label><input type="radio" name="mode" value="mode2">MODE2</label>
</div>


<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Choose site
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a target="_blank" href="http://example.com/index.php?mode=">Site1</a></li>
    <li><a target="_blank" href="http://example.com/index.php?mode=">Site2</a></li>
    <li><a target="_blank" href="http://example.com/index.php?mode=">Site3</a></li>
  </ul>
</div>

And i use this code snippet to detect what mode is selcted and add it to var mode:

$(document).ready(function() {
    var myRadio = $('input[name=mode]');
    myRadio.on('change', function () {
        var mode=myRadio.filter(':checked').val();
    });            
});

What i want to do is to add javascript var $mode to href tags.

href="http://example.com/index.php?mode={$mode}

How could i accomplish this ?

I think only way would be to do this with some javascript function ? Its not possible to just "print" var to href ?

JSFIDDLE: https://jsfiddle.net/DTcHh/18683/

Answer 1

Use data-* attribute to keep static href value to be used later. .change() will trigger change event initially to set the value of href attributes.

 $(document).ready(function() { var myRadio = $('input[name=mode]'); myRadio.on('change', function() { var mode = myRadio.filter(':checked').val(); $('ul.dropdown-menu a').prop('href', function() { return this.getAttribute('data-href') + mode; }) }).change(); });

 <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="radio"> <label> <input type="radio" name="mode" checked="checked" value="mode1">MODE1</label> </div> <div class="radio"> <label> <input type="radio" name="mode" value="mode2">MODE2</label> </div> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Choose site <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a target="_blank" href="http://site1.com/index.php?mode=" data-href="http://site1.com/index.php?mode=">Site1</a> </li> <li><a target="_blank" href="http://site2.com/index.php?mode=" data-href="http://site2.com/index.php?mode=">Site2</a> </li> <li><a target="_blank" href="http://site3.com/index.php?mode=" data-href="http://site3.com/index.php?mode=">Site3</a> </li> </ul> </div>

Fiddle here

Answer 2

Try this :-

$(document).ready(function() {
    var myRadio = $('input[name=mode]');
    myRadio.on('change', function () {
        var mode=myRadio.filter(':checked').val();
        $("ul.dropdown-menu li a").each(function(){
           $(this).attr('href',$(this).attr('href').split('?')[0] + "?mode=" + mode);
        });
    }).change(); //trigger on page load          
});

DEMO

Answer 3

Check this fiddle I've modified for you: https://jsfiddle.net/so2fw1o4/1/

Add this to your myRadio.on('change', function

//here change the urls
    $('.dropdown-menu a').each(function(){
      $(this).attr('href', $(this).data('url') + mode)
    })

And you will need to add data attribute to each link to store initial link

<a target="_blank" data-url="http://site. com/index.php?mode=" href="http://site. com/index.php?mode=">Site1</a>

Answer 4

Although you already have some answers here, I figured I would post another alternative (not necessarily any better).

You could add a class to each link, handle their click events, and set the new window's location yourself to achieve a similar effect.

The following is a code snippet modifying the jQuery in your fiddle:

$(document).ready(function() {
  var myRadio = $('input[name=mode]');
  var mode = myRadio.filter(':checked').val(); // Initial setting

  myRadio.on('change', function () {
    mode=myRadio.filter(':checked').val();
  });

  $('.mode-link').click(function(e) {
    e.preventDefault(); //stop the click action

    // Check if the mode has been set
    if (mode) {
      // Create the href value
      var newHref = $(this).attr('href') + mode;

      // Open the new tab/window with the correct href value
      window.open(
        newHref,
        '_blank'
      );
    }
  });
});

I simply added the mode-link class to each a element in the dropdown, stored the radio button value change in a new variable mode , added the click event handler, and finally handled the click event to create the new href value and open a new tab/window with that location.

If you didn't want the new tab/window you could simply set location.href = newHref but this wouldn't mimic the new tab/window opening, hence why I use window.open() .

I have a modified sample here: JSFiddle