Change HREF button link based upon HTML option selection.

I'm creating a mock web-form for my employer...to mimic 'to-be-designed' functionality.  Basically, I want the HREF link of a button to change based upon one of three selected options appearing on the web page....

.....
<select tabindex="6" name="ab_category" class="long_box">
     <option> -- </option>
     <option>Casual Absence</option>
     <option>Non-Work Related</option>
     <option>Work Related</option>
</select>
.....
<a href="link-location.html"><button id="a_button">Generate Report</button></a>

Can I use Javascript to change the href address of the button based upon the option that the user selects?  If so how?  If not how?

BanyanTechAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
You can add 'onchange' to the <select> and get the selected option to change the 'href' in the anchor.  You need to add an 'id' to those elements so the javascript can select them.
Dave BaldwinFixer of ProblemsCommented:
Here's a demo.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Change Link</title>
<script type="text/javascript">
<!--
function chnglnk() {
var x=document.getElementById("slct");
//alert(x.selectedIndex);
y = x.selectedIndex;
if(y==1) document.getElementById("hrf").href = "Casual.html";
if(y==2) document.getElementById("hrf").href = "Non-Work.html";
if(y==3) document.getElementById("hrf").href = "Work.html";
document.getElementById("txt").innerHTML = y;
}
// -->
</script>
</head>
<body>
<h1>Change Link</h1>
<select id="slct" name="ab_category" class="long_box" onchange="chnglnk()">
     <option value="0"> -- </option>
     <option value="1">Casual Absence</option>
     <option value="2">Non-Work Related</option>
     <option value="3">Work Related</option>
</select><br />
<p id="txt"></p>

<a id="hrf" href="link-location.html"><button id="a_button">Generate Report</button></a>

</body>
</html>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
BanyanTechAuthor Commented:
Okay very cool....but what do I put in the href="......" so that we capture the changed link?  I imagine something like href="Javascript:chnglnk()"...but it does not work.
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

Dave BaldwinFixer of ProblemsCommented:
You don't need to change anything except the link text at the end of lines 13-15.  Those lines change the 'href' in the link.  Adding something in the href isn't needed since lines 13-15 replace whatever is there.  Mouse over it and you will see that the link changes as you select the options in the dropdown.
BanyanTechAuthor Commented:
Ahh yes - excuse the brain freeze - awesome thanks.
Dave BaldwinFixer of ProblemsCommented:
You're welcome and some of these things look like Greek to me the first time i see them.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JScript

From novice to tech pro — start learning today.