View Full Version : Replace text in textarea.

07-11-2006, 05:52 PM
I need a Javascript code where words or phrases in the same form (textarea) can be changed by selecting from a list.

ie. The sentence in the text area could be:

"The (house) has got three windows and a (lovely garden)."

The user selects the button "house", which open a layer with a dropdown menu and changes (house) for (flat) or (bungalow) etc. He/She can then select the "lovely garden" button and open a layer with another dropdown menu and change (lovely garden) for (back yard) etc. (You can see this better if you copy the following code into a browser.)

I have been struggling for days with "function replaceChars(entry)" but have problems with multiple choices. Any help would be gratefully received. Here is the bare code which illustrates my idea but without my previous pathetic "function replaceChars(entry)" eforts as I got nowhere very slowly. :confused: (PS. This only needs to work in Internet Explorer.)


<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Sin T&#237;tulo</title>
<script language="JavaScript">
function na_show_layer(lname, flag)
var layer = (navigator.appName == 'Netscape') ? document.layers[lname] : document.all[lname];
if (lname == '')
if (navigator.appName == 'Netscape')
layer.visibility = (flag == 0) ? 'show' : 'hide';
layer.style.visibility = (flag == 0) ? 'visible' : 'hidden';

// -->

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<form name="phrases">
<p><textarea name="phrase" rows="2" cols="40">The (house) has got three windows and a (lovely garden).</textarea>
<input type="button" name="button1" value="house"
OnClick="na_show_layer('house_layer', 0);na_show_layer('lovely_garden_layer', 1);">
<input type="button" name="button3" value="lovely garden"
OnClick="na_show_layer('lovely_garden_layer', 0);na_show_layer('house_layer', 1);"></p>
<div id="house_layer" style="width:75px; height:74px; position:absolute; left:10px; top:55px; z-index:1; visibility:hidden;">

<p><select name="house" size="1">
<option>old shack</option>

<div id="lovely_garden_layer" style="width:89px; height:67px; position:absolute; left:10px; top:55px; z-index:1; visibility:hidden;">

<form name="phrases">
<select name="lovely garden" size="1">
<option>lovely garden</option>
<option>back yard</option>
<option>green fields</option>
<option>a big pond</option>