2

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/

Improve this question

4 Answers 4

Reset to default
2

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

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

Comments

0

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>
Improve this answer

4 Comments

Thank you, this clears things up for me. 1 other question how to only apply this function for 1 div ? At the moment if i have multiple dropdowns it changes all hrefs. I only want to change one dropdown.
1) add specific class to the on you want to change, say .my-dropdown 2) change code to $('.dropdown-menu.my-dropdown a').each(function(){
Thanks. But i cant seem to figure out where to add class, i tried creating new div with class mydropdown, i tried adding class to li and a. But did not work, maybe you can update fiddle ?
<ul class="dropdown-menu my-dropdown">
0

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

Improve this answer

1 Comment

What about second attempt ?
0

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.