"Sentence generator" with word replacement. Twey?

[green]

I refer to Julmado's insert about a "sentence generator". I was unsuccessful in getting a reply on post "replace text in textarea" but see that the tool I need to create is similar to Julmado's in some ways.

However, instead of sending a complete phrase to a textarea, I need to CHANGE existing words within that text area. ie the user selects an item from a drop down box and on select the word or words replace text in text area. There should be up to 4 drop down menus to change different words in text area. eg. A user can change any of the words in the text area in brackets from items in 4 separate drop down menus - one for (house, one for (eight) etc.
"The (house) has got (eight) windows, a (back yard) and (swimming pool).

Any ideas?

[jscheuer1]

Well, you could go for a complex system of search and replace using regular expressions but, I'm guessing that it would be easier and acceptable to generate the entire string onchange of any of the drop downs. The string could be concatenated from the unchanging portions and the text of each drop downs onchange of any of the drop downs.

You would have four selects with whatever words available in each one that you want. Example select:

<select name="firstvar" onchange="concatString();">
<option selected="1">house</option>
<option>tent</option>
<option>apartment</option>
</select>

The other selects would have the same onchange event and be named secondvar, thirdvar and fourthvar.

Put these and the textarea all inside a form named, say - 'stringer'. Name the textarea, um - 'theString'.

Then in the head, have this script:

<script type="text/javascript">
function concatString(){
var f=document.forms.stringer;
var oval=function(name){
return f[name+'var'].options[f[name+'var'].selectedIndex].text;
}
f.theString.value="The "+oval('first')+" has got "+oval('second')+" windows, a "+oval('third')+" and "+oval('fourth')+".";
}
</script>

[green]

Thanks, John. I'm glad you didn't use regular expresions. This script is easy to edit and works fine in IE (which is what I need). Thanks very much!

However, could I ask you how I combine additional textareas working independently with other "concatString" dropdowns on the same page. What I mean is, so I can edit a second and third sentence etc. Each sentence (in textarea) is different with its own set of dropdowns. I can never understand how to repeat similar scripts on the same page. Preferably, all these would work in the SAME form on that page. Hopefully, you won't have to change much (cos I like what you scripted).

Mike

[Twey]

Put these and the textarea all inside a form named, say - 'stringer'. Name the textarea, um - 'theString'.

Lol

<script type="text/javascript">
function selectPrintf(frm, opEl, baseStr /*, selectOneName, selectTwoName, selectThreeName, ... */) {
  var opStr = baseStr;
  for(var i = 3; i < arguments.length; ++i)
    opStr = opStr.replace(/%s/, frm.elements[arguments[i]].options[frm.elements[arguments[i]].selectedIndex].text);
  frm.elements[opEl].value = opStr;
}
</script>

I'm afraid I had to use regex, but it's a very simple one.
Example of use:

<form action="" onchange="selectPrintf(this, 'op', 'The %s has got %s windows, a %s and a %s.', 'first', 'second', 'third', 'fourth');">
  <select name="first">
    <option selected="selected">house</option>
    <option>tent</option>
    <option>apartment</option>
  </select>
  <select name="second">
    <option selected="selected">seven</option>
    <option>five</option>
    <option>four</option>
    <option>eighteen</option>
  </select>
  <select name="third">
    <option selected="selected">garden</option>
    <option>office</option>
    <option>bedroom</option>
  </select>
  <select name="fourth">
    <option selected="selected">nursery</option>
    <option>playroom</option>
    <option>balcony</option>
  </select>
  <input type="text" name="op" size="80">
</form>

If you want to add more on the same form, just add another of those function calls to the onchange event, remembering to seperate with a semicolon, and change the string and names of the elements.

[jscheuer1]

Twey's version is highly portable on a given page but won't work in IE as, oddly enough, IE will not transfer/extend the form's onchange event to its elements. It would work if the onchange event were assigned to each select element but, that would be overly wordy I think. I played around with this idea later and came up with a more compact version that would require a separate handler function and initialization (all forms on a page to be included in this could be initialized in a single onload function for the page) for each form. The forms would all need to follow a basic layout. Things could be made made more portable I'm sure though, with a bit more code. Here is what I came up with earlier, just playing around with this idea:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Change Specific Words in a Text Area - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function cS(s){
var e=s.form.elements, o=function(t){return t.options[t.selectedIndex].text;};
e[4].value="The "+o(e[0])+" has got "+o(e[1])+" windows, a "+o(e[2])+" and "+o(e[3])+".";
}
onload=function(){
var g=document.forms[0].elements, i=0;
for (i ; i < g.length; i++)
if (g[i].tagName.toLowerCase()=='select')
g[i].onchange=function(){cS(this);};
};
</script>
</head>
<body>

<form action="javascript:void(0);">
Select Dwelling Type: <select>
<option selected>house</option>
<option>tent</option>
<option>apartment</option>
</select><br>
Select Number of Windows: <select>
<option selected>4</option>
<option>7</option>
<option>20</option>
</select><br>
Select Feature: <select>
<option selected>driveway</option>
<option>large backyard</option>
<option>sauna</option>
</select><br>
Select Additional Feature: <select>
<option selected>swimming pool</option>
<option>garage</option>
<option>attic loft</option>
</select><br>
<textarea rows="1" cols="75" readonly style="overflow:hidden;">The house has got 4 windows, a driveway and swimming pool.</textarea>
</form>
</body>
</html>

[Twey]

Twey's version is highly portable on a given page but won't work in IE

Ack! Sorry -- should've researched more. There's no need to do all that, though; simply adding:

window.onload = function() {
  for(var i = 0, f = document.forms; i < f.length; ++i)
    if(f[i].onchange && f[i].onchange.toSource().toLowerCase().indexOf('selectprintf'))
      for(var j = 0, e = document.forms[i].elements; j < e.length; ++j)
        if(e[j].tagName.toLowerCase == "select")
          e[j].onchange = f[i].onchange;
};

to the end of mine will work around this (presumed) bug, while retaining the simple string formatting (and not creating a new function each time a select is changed).

[jscheuer1]

As I mentioned and now see more clearly, Twey's idea is intrinsically portable. So I have used his method (modified for IE, it will still work in other modern browsers) and created a front-end function for it, f1(el). This function is fairly simple, and you can make one up for each form on your page that you want to use his selectPrintf() function with, calling them f1(el), f2(el), f3(el), etc. each with its own tailor made call to selectPrintf() and assigning the appropriate one to each select in a given form using the format:

onchange="f#(this)"

as seen in the form in the below demo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function f1(el){
selectPrintf(el.form, 'op', 'The %s has got %s windows, a %s and a %s.', 'first', 'second', 'third', 'fourth');
}
function selectPrintf(frm, opEl, baseStr /*, selectOneName, selectTwoName, selectThreeName, ... */) {
  var opStr = baseStr;
  for(var i = 3; i < arguments.length; ++i)
    opStr = opStr.replace(/%s/, frm.elements[arguments[i]].options[frm.elements[arguments[i]].selectedIndex].text);
  frm.elements[opEl].value = opStr;
}
</script>
</head>
<body>
<form action="javascript:void(0);">
  <select name="first" onchange="f1(this)">
    <option selected="selected">house</option>
    <option>tent</option>
    <option>apartment</option>
  </select>
  <select name="second" onchange="f1(this)">
    <option selected="selected">seven</option>
    <option>five</option>
    <option>four</option>
    <option>eighteen</option>
  </select>
  <select name="third" onchange="f1(this)">
    <option selected="selected">garden</option>
    <option>office</option>
    <option>bedroom</option>
  </select>
  <select name="fourth" onchange="f1(this)">
    <option selected="selected">nursery</option>
    <option>playroom</option>
    <option>balcony</option>
  </select>
  <input type="text" name="op" size="80" readonly value="The house has got seven windows, a garden and a nursery.">
</form>
</body>
</html>

Notes: The red parts in the f1(el) function in the above are what are to be changed for each additional f#(el) function.

[Twey]

Not bad, but still wordier than it has to be. I suppose it depends on whether there need to be other selects that don't have the event handler, in which case mine would be less efficient than it could be.

If you want "normal" selects in the same form, use John's solution; otherwise, use mine.

[green]

Thank you gentlemen for the time you put in to try and solve that problem. I went for John's version in the end as I may run other "normal" selects in the same form and it works fine in IE. But I very much appreciate the comments from both of you as you helped me along a little more in this long learning process of scripting.

Regards, Mike