dynamically change text by changing option in drop down form element

Forum Moderators: open

Message Too Old, No Replies

dynamically change text by changing option in drop down form element

does anyone know?

bono

2:33 pm on Jul 13, 2005 (gmt 0)

can anyone suggest a way in which i could do this..

Im new to javascript and havnt really got clue..

bono

2:34 pm on Jul 13, 2005 (gmt 0)

Ooo Id like to do this on the same page automatically..

rocknbil

8:56 pm on Jul 13, 2005 (gmt 0)

Arrays and drop down lists are both zero indexed, meaning the first element is element 0, second, 1, etc. Use this to your advantage.

<html><head><title>whatever</title>

var textBlocks = new array(
'Select from the list to change this box',
'Text block two',
'Text block three');

function changeText(form) {
var ind = form.whatever.selectedIndex;
form.display.value=textBlocks[ind];
}
</script>

</head><body>

<form>
<select name="whatever" onChange="changeText(this.form);">
<option value="0">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
</select><br>
<textarea name="display">Select from the list to change this box</textarea>
</form>
</body></html>

Untested, but should work.

Bono is awesome, "can't sing but I got soul." :-)

bono

10:07 am on Jul 14, 2005 (gmt 0)

I just straight copy n pasted that to see if it worked... :-( it didnt

Alternative Future

10:20 am on Jul 14, 2005 (gmt 0)

Change the array to Array like:

var textBlocks = new Array(
'Select from the list to change this box',
'Text block two',
'Text block three');

It would have been a simple over sight on rocknbil code.

-GS

rocknbil

4:54 pm on Jul 14, 2005 (gmt 0)

DOH! One time I don't test and it breaks! LOL! Thx.

bono

1:00 pm on Jul 19, 2005 (gmt 0)

Guys that works fine but I dont really want it as a text area. just want it displayed as a normal bit of text on my page.. any more ideas?

rocknbil

12:39 am on Jul 20, 2005 (gmt 0)

Well, when you do a document.write it will rewrite the whole page, you can write to an iframe within the page . . . but the simplest solution?

(although symantically completely wrong probably)

Use a text field or a textarea as described, then use CSS to make the borders invisible, and onfocus=blur(); to make it non-editable. I've done this one before but you'll have to do your homework to get the CSS, it's not handy at the moment. :-)

bono

9:03 am on Jul 21, 2005 (gmt 0)

ive been looking for that css hehe.. your right its not handy at all.. hmm document.write re-writes the page.. can you give more of an idea how that can help me? Im new to javascript..

bono

2:48 pm on Jul 25, 2005 (gmt 0)

thanks guys, right that works using the drop down boxes and the transparent text boxes.
thankyou very much for your help

Sathallrin

6:17 pm on Jul 26, 2005 (gmt 0)

This is a modified version of rocknbil's code so that you can just place the text on the page without using a textarea element.

<html><head><title>whatever</title>
<script type="text/javascript">
var textBlocks = new Array(
'Select from the list to change this box',
'Text block two',
'Text block three');
function changeText(elemid) {
var ind = document.getElementById(elemid).selectedIndex;
document.getElementById("display").innerHTML=textBlocks[ind];
}
</script>
</head><body>
<form>
<select id="whatever" onChange="changeText('whatever');">
<option value="0">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
</select><br>
</form>
<div id="display">Select from the list to change this box</div>
</body></html>

You can change the div to any other element, such as a span, if you wish.