Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Dropdown option label used as dynamic link and text.

Posted on 2010-09-16
10
Medium Priority
?
312 Views
Last Modified: 2012-05-10
I have a dropdown menu (code below).  I have a span of text that I need to reflect the LABEL (not value) of the currently selected option in the dropdown "fbContentsMenu".  So if the user selected the second option, the span of text would change to 'D Home - Mar-Apr 2010'

I also have a hyperlink to the right of this span that reads "Click here to learn more." This hyperlink also needs to reflect the LABEL of the same dropdown, but with the spaces replaced with + to be URL safe.  Again, if the second option is selected in the dropdown, then the hyperlink code would read:

<a href="project-detail.php?name=D+Home+-+Mar-Apr+2010">Click here to learn more.</a>

Any ideas on how this can be accomplished?  Thanks!
<select id="fbContentsMenu" name="fbContentsMenu">
<option value="2">D Home - May-Jun 2010</option>
<option value="4">D Home - Mar-Apr 2010</option>
<option value="6">D Home - Mar-Apr 2009</option>
</select>

Open in new window

0
Comment
Question by:James_Avery
  • 6
  • 4
10 Comments
 
LVL 83

Expert Comment

by:leakim971
ID: 33696277
0
 

Author Comment

by:James_Avery
ID: 33696517
Cool, thanks.  Any idea on how to pull off the rest of my question?
0
 
LVL 83

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 33696905
Check this :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
	function reflectMyChoice(s) {
		var text = s.options[s.selectedIndex].text;
		document.getElementById("myAnchor").setAttribute("href", "project-detail.php?name=" + encodeURI(text));
		document.getElementById("myAnchor").innerHTML = text;
		document.getElementById("mySpan").innerHTML = text;
	}
</script>
</head>

<body onload="reflectMyChoice(document.getElementById('fbContentsMenu'))">

<select id="fbContentsMenu" name="fbContentsMenu" onchange="reflectMyChoice(this);">
<option value="2">D Home - May-Jun 2010</option>
<option value="4">D Home - Mar-Apr 2010</option>
<option value="6">D Home - Mar-Apr 2009</option>
</select>

<br /><br /><br /><br /><br />

Span :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="mySpan"></span>

<br />

Anchor :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a id="myAnchor" href=""></a>

</body>
</html>

Open in new window

0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:James_Avery
ID: 33704626
Wow. This is exactly what I was looking for.  Thanks!  

One problem: It looks like the URL that is generated still contains spaces rather than + or %.

What can I do to correct this?
0
 
LVL 83

Expert Comment

by:leakim971
ID: 33706495
>One problem: It looks like the URL that is generated still contains spaces rather than + or %.

sure ? click on it.

0
 
LVL 83

Expert Comment

by:leakim971
ID: 33706503
if you want to replace space by %20 use : myString.replace(/\s/g,"%20")
or by + : myString..replace(/\s/g,"+")

but again in you case it's not needed
0
 

Author Comment

by:James_Avery
ID: 33716866
Thanks a lot!  Below is a link to the page I am currently working with.  The function appears to be working correctly, but for some reason it doesn't turn the 'myAnchor' span into a link.  It may be clashing with some of the more advanced javascript I have running on the page, but I am not sure.  

http://www.drawninwardmedia.com/cantoni/studioNEW.php

Is there an alternate way to create a hyperlink out of the 'myAnchor' span that we could try?
0
 
LVL 83

Expert Comment

by:leakim971
ID: 33716911
Initially in your question you have an anchor. Why do you propose an span now ?
<span id="myAnchor" href="project-detail.php?name=D%20Home%20-%20Mar-Apr%202010">D Home - Mar-Apr 2010</span>

instead :

<a id="myAnchor" href="project-detail.php?name=D%20Home%20-%20Mar-Apr%202010">D Home - Mar-Apr 2010</a>

Open in new window

0
 

Author Comment

by:James_Avery
ID: 33716988
Wow. Thank you so much for you help.  Everything seems to be working as intended.
0
 
LVL 83

Expert Comment

by:leakim971
ID: 33717045
You're welcome! Thanks for the points!
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…

927 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question