CODEWITHSUNDEEP
javascriptjqueryhtml
user2033139
user2033139

Reputation: 583

Add javascript var to href

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/

Upvotes: 2

Views: 99

Answers (4)

Fizz
Fizz

Reputation: 3487

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

Upvotes: 0

Kartikeya Khosla
Kartikeya Khosla

Reputation: 18873

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

Upvotes: 0

shershen
shershen

Reputation: 9993

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>

Upvotes: 0

Rayon
Rayon

Reputation: 36609

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

Upvotes: 2

Related Questions