How to make option selection change button link?

Question

I have a drop down list and a button. I want to make the selection of list reflects on the button link.

Here is the example code:

<select style="float:left;">
<option value="5">$5.00 monthly</option>
<option value="10">$10.00 monthly</option>
<option value="15">$15.00 monthly</option>
<option value="20">$20.00 monthly</option>
</select>

<div id="button" style="width:100px;height:30px;float:left;background:#ccc;line-height:30px;text-align:center;margin:auto 5px;">
<a href="http://ordernow/5/">Order</a>
</div>

What I want to achieve is when the user for example selects the second option, the button link changes to http://ordernow/10/ instead of http://ordernow/5/ and so on. Can someone inform me how do that or provide a link for a tutorial regarding this? Thank you.

Hey Jerry, don't forget to choose an answer when your problem has been solved! If it hasn't been solved, please update your question! — John Harding, May 19 '15 at 23:20

score 2 · Accepted Answer · answered May 09 '15 at 23:33

Using pure javascript and adding ids to some of the elements:

JSFiddle

Here's the JavaScript:

document.getElementById("subscription").onchange = function() {
    
    document.getElementById("order-btn").href = "http://ordernow/"+this.value+"/";
    
}

score 1 · Answer 2 · answered May 09 '15 at 23:29

1

You can listen to select's onchange to get the new selected option's value. And then add the value to button's href:

$('select').on('change', function () {
    $('#button > a').attr('href', 'http://ordernow/' + $(this).val() + '/');
});

jsfiddle DEMO

answered May 09 '15 at 23:29

Samurai

3,588
5
23
36

score 1 · Answer 3 · answered May 09 '15 at 23:37

Can use a regex to parse the end of the href so path doesn't need to be known

$('select').change(function(){
    var val =$(this).val();
    $('#button a').attr('href', function(_,href){
        var reg = /\/\d\/$/;        
        return href.replace(reg, '/'+val+'/');        
    });    
});

DEMO

How to make option selection change button link?

3 Answers3

Linked