omkarbhagat omkarbhagat -4 years ago 115
HTML Question

How to change href link of button used with dropdown menu?

I am trying to create drop down menu with a button.

My code is -

<div class="dropdown-plans">
<select id="basic_plan" name="bill_cycle">
<option value="tri"> 3 Years - Rs. 100/month </option>
<option value="bi"> 2 Years - Rs. 200/month </option>
<option value="ann"> 1 Year - Rs. 100/month </option>
</select>
</div>

<div class="button-plans">
<a href="somelink"> Order now </a>
</div>


Depending on what option i select from dropdown, the href value "somelink" should change.
For instance if i select 1 year. href value should change from "somelink" to "google.com"

Update:

I searched two things. 1) Changing href using javascript and 2) using onchange for select tag. It lead me to create this following piece of code.

<script>

function getOpt(period) {

if (period.value = "tri") { document.getElementById("abc").href="tri.html"; }
else if (period.value = "bi") { document.getElementById("abc").href="bi.html"; }
else { document.getElementById("abc").href="ann.html"; }
}

</script>

<div class="dropdown-plans">

<select id="basic_plan" name="bill_cycle" onchange="getOpt(this)">

<option value="tri"> 3 Years - Rs. 100/month </option>
<option value="bi"> 2 Years - Rs. 200/month </option>
<option value="ann"> 1 Year - Rs. 100/month </option>

</select>

</div>

<div class="button-plans">
<a id="abc" href="something"> Order now </a>
</div>


Problem: The drop down shows 3 years by default. But if i select 2 years, it still remains 3 years.

Answer Source

Try this to change the href to the value of the selected option:

HTML

<div class="dropdown-plans">
    <select id="basic_plan" name="bill_cycle">
        <option value="tri">3 Years - Rs. 100/month</option>
        <option value="bi">2 Years - Rs. 200/month</option>
        <option value="ann">1 Year - Rs. 100/month</option>
    </select>
</div>
<div class="button-plans">
    <a id="abc" href="something"> Order now </a>
</div>

Javascript

var sel = document.getElementById('basic_plan');
sel.onchange = function () {
    document.getElementById("abc").href = this.value + ".html";
}

Demo here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download