Needing hyperlinks inside of textbox

[sueboo]

Hi! I recently started adding Javascript to my html pages and I am learning it as fast as I can. I am very stuck right now, though. I have a dropdown list that has all the volenteer opportunities listed. When they pick something, a corresponding paragraph is written into a textarea. Well, I apparently can't put hyperlinks or formatted text into a textarea, and I really need them. I read about Document.write, which WILL do formatted text, but when I used onchange="document.write(shortcut.text.value)" instead of onchange="showtext()" it goes off to another window or something and writes it there. Putting the document.write statement by itself after the select box works one time, but won't change if they select something else from the drop-down list.

Is there some way to have different formatted, hyperlinked paragraphs appear and change each time they select something different from a drop-down list?

Just sign me,
Baffled and Stuck,
-Susan

<form name="combowithtext">
<select name="example" size="1" onchange="showtext()">
<option>Book Sales
</option><option>Build Team
</option><option>Bus Ministry/Drivers
</option><option>Drama Ministry
</option></select>
<br>
<textarea rows="5" cols="21" wrap="virtual" name="text"></textarea>


<script language="javascript">
<!--
var shortcut=document.combowithtext
var descriptions=new Array()
//extend this list if neccessary to accomodate more selections
descriptions[0]="Assist with book sales and inventory."
descriptions[1]="Assist with carpentry, painting and set design"
descriptions[2]="Drive or monitor on bus routes"
descriptions[3]="Communicate the message through drama productions, commercials, skits and human videos"

shortcut.text.value=descriptions[shortcut.example.selectedIndex]

function showtext(){
shortcut.text.value=descriptions[shortcut.example.selectedIndex]
;
}
//-->

[b1randon]

Hi! I recently started adding Javascript to my html pages and I am learning it as fast as I can. I am very stuck right now, though. I have a dropdown list that has all the volenteer opportunities listed. When they pick something, a corresponding paragraph is written into a textarea. Well, I apparently can't put hyperlinks or formatted text into a textarea, and I really need them. I read about Document.write, which WILL do formatted text, but when I used onchange="document.write(shortcut.text.value)" instead of onchange="showtext()" it goes off to another window or something and writes it there. Putting the document.write statement by itself after the select box works one time, but won't change if they select something else from the drop-down list.

Is there some way to have different formatted, hyperlinked paragraphs appear and change each time they select something different from a drop-down list?

Just sign me,
Baffled and Stuck,
-Susan

<form name="combowithtext">
<select name="example" size="1" onchange="showtext()">
<option>Book Sales
</option><option>Build Team
</option><option>Bus Ministry/Drivers
</option><option>Drama Ministry
</option></select>
<br>
<textarea rows="5" cols="21" wrap="virtual" name="text"></textarea>


<script language="javascript">
<!--
var shortcut=document.combowithtext
var descriptions=new Array()
//extend this list if neccessary to accomodate more selections
descriptions[0]="Assist with book sales and inventory."
descriptions[1]="Assist with carpentry, painting and set design"
descriptions[2]="Drive or monitor on bus routes"
descriptions[3]="Communicate the message through drama productions, commercials, skits and human videos"

shortcut.text.value=descriptions[shortcut.example.selectedIndex]

function showtext(){
shortcut.text.value=descriptions[shortcut.example.selectedIndex]
;
}
//-->

Susan, you don't want to use document.write() or a textarea. The reason is that document.write() rewrites the source of the window. Textareas also display only simple text, and links are html. You seem like you're learning fast though so I'm going to give you a few tips and some reference material and I'm sure you'll complete your project.

Instead of using textarea use a div tag. Div is just an invisible "division" of a web page that holds some HTML. It will look like this:

<div id="linksHere"></div>
 

When you want to write HTML to the inside of this div you'll do some code like this:

<script>
document.getElementById('linksHere').innerHTML = "<a href=\"http://www.google.com\">Google</a>";
</script>
 

Simple enough? Here's some more about div tags and also more about using .innerHTML. Post again if you get hung up but you seem like you just needed a push in the right direction.

[sueboo]

Wow! Thank you so much for pointing me in the right direction! I found a script that ALMOST does what I want, exept they use an unordered list instead of a select box. But I can't seem to put <a href="javascript:rollerCoster(1);"> around the <option> of the select box. How would I apply the rollerCoaster script to the selected item of a Select box?
Thanks,
-Susan

function rollerCoster(id) {
var txts = new Array(6);//Make a few Jokes - Ha Ha Ha
txts[0] = Doctor, Doctor I'm a burglar!<br />Have you taken anything for it?br />";
txts[1] = Engineers ;
txts[2] = " Four hundred and seventy one ;
document.getElementById("jokearea").innerHTML = txts[id];
}

<div id="jokearea">&nbsp;</div>
<ul>
<li><a href="javascript:rollerCoster(0);">Doctor</a></li>
<li><a href="javascript:rollerCoster(1);">Mathamatics</a></li>
<li><a href="javascript:rollerCoster(2);">Light Bulb</a></li>
</ul>

<div id="jokearea">&nbsp;</div>

Susan, you don't want to use document.write() or a textarea. The reason is that document.write() rewrites the source of the window. Textareas also display only simple text, and links are html. You seem like you're learning fast though so I'm going to give you a few tips and some reference material and I'm sure you'll complete your project.

Instead of using textarea use a div tag. Div is just an invisible "division" of a web page that holds some HTML. It will look like this:

<div id="linksHere"></div>
 

When you want to write HTML to the inside of this div you'll do some code like this:

<script>
document.getElementById('linksHere').innerHTML = "<a href=\"http://www.google.com\">Google</a>";
</script>
 

Simple enough? Here's some more about div tags and also more about using .innerHTML. Post again if you get hung up but you seem like you just needed a push in the right direction.

[b1randon]

Wow! Thank you so much for pointing me in the right direction! I found a script that ALMOST does what I want, exept they use an unordered list instead of a select box. But I can't seem to put <a href="javascript:rollerCoster(1);"> around the <option> of the select box. How would I apply the rollerCoaster script to the selected item of a Select box?
Thanks,
-Susan

function rollerCoster(id) {
var txts = new Array(6);//Make a few Jokes - Ha Ha Ha
txts[0] = Doctor, Doctor I'm a burglar!<br />Have you taken anything for it?br />";
txts[1] = Engineers ;
txts[2] = " Four hundred and seventy one ;
document.getElementById("jokearea").innerHTML = txts[id];
}

<div id="jokearea">&nbsp;</div>
<ul>
<li><a href="javascript:rollerCoster(0);">Doctor</a></li>
<li><a href="javascript:rollerCoster(1);">Mathamatics</a></li>
<li><a href="javascript:rollerCoster(2);">Light Bulb</a></li>
</ul>

<div id="jokearea">&nbsp;</div>

That's because you don't really want a link (<a>) what you want to do is to run your script when the selection changes. You do this with the OnChange event handler. If you need to call rollerCoaster with the index of the item that is selected you'll need to use the SelectedIndex property of the select box. The code will look something like this:

<select onChange="javascript:rollerCoaster(this.selectedIndex);">
 

That should help. Let me know if you're still having trouble.