Making this code Mozilla compatible.

**green** · 05-02-2011, 07:51 AM

I believe it was jsheuer1 who helped me with this code originally.

Using OnPropertyChange (see code in red) when the user changes the value in a dropdown list, the values are transferred to two textareas (one is the Spanish phrase and the other the English translation).

This works fine in IE, however, I'd like it to work in Mozilla Firefox too. Can someone help me with the coding adaptations?

I include the entire page code for testing purposes.

NB. The beauty of this text is that it allows more dropdown lists to be added which change other values (translations of other parts of the sentence) in the same textareas. I'd like to respect this.

Regards,

Code:

<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<style style=text/css>
option.yellow {background-color: #ffff00;}
option.blue {background-color: #00ffff;}
option.green {background-color: #008000; font-weight: bold; color: white;}
option.red {background-color: #ff0000; font-weight: bold; color: white;}
</style>


    <script type="text/javascript">
      function changeSelectValues(c, v) {
        var classes = c.split(" "),
	  nclasses = [];

	for(var i = 0; i < classes.length; ++i)
	  if(/^selectpairs-\w+$/.test(classes[i]))
	    nclasses.push(classes[i]);
	
        for(var i = 0, e = document.getElementsByTagName("select"); i < e.length; ++i) {
	  for(var j = 0; j < nclasses.length; ++j)
	    if(e[i].className.indexOf(nclasses[j]) === -1)
	      break;
	  if(j === nclasses.length && j > 0)
            e[i].selectedIndex = v;
	}
      }

      window.onload = function() {
        for(var i = 0, e = document.getElementsByTagName("select"); i < e.length; ++i) {
	  e[i].oldonchange = e[i].onchange;
	  e[i].onchange = function() {
	    if(typeof this.oldonchange === "function") this.oldonchange();
	    changeSelectValues(this.className, this.selectedIndex);
	  };
        }
	e = null;
      };
    </script>
    
    
<script type="text/javascript">

	function f1(el){
selectPrintf(el.form, 'op', '%s (APELLIDO(S)):', 'first');
}
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;
}

	function f2(el){
selectPrintf(el.form, 'op', '%s (APELLIDO(S)),', 'first');
}
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 bgcolor="#CAC6C6" oncontextmenu="return false;" onkeydown="onKeyDown()" text="black" link="blue" vlink="blue" alink="red">

<p align="center" style="font-family:Arial,sans-serif; font-size:8pt; margin-top:1; margin-bottom:1;">&nbsp;</p>
<p align="center" style="font-family:Arial,sans-serif; font-size:8pt; margin-top:1; margin-bottom:1;"><b><font face="Arial"><span style="font-size:8pt;">&nbsp;</span></font></b></p>
<p align="center" style="font-family:Arial,sans-serif; font-size:8pt; margin-top:1; margin-bottom:1;">&nbsp;</p>


<form action="javascript:void(0);">
    <p style="font-family:Arial,sans-serif; font-size:8pt; margin-top:1; margin-bottom:1;" align="center">
<a name="1"><font face="Arial"><b><span style="font-size:8pt;">                    
    <textarea rows=2 name="op" size="68" readonly value="(Estimado señor) (APELLIDO(S)):" cols="58" class="es" style="font-family:Arial,sans-serif; font-size:10pt; background-color:rgb(247,225,213); border-width:2; border-color:maroon; border-top-style:solid; border-right-style:solid; border-bottom-style:none; border-left-style:solid; overflow:hidden;">(Estimado señor) (APELLIDO(S)):</textarea>&nbsp;</span></b></font></a></p>
    <p style="font-family:Arial,sans-serif; font-size:8pt; margin-top:1; margin-bottom:1;" align="center"><font face="Arial"><b><span style="font-size:8pt;"> 
     
  
  <select name="first" onMousewheel="self.focus(); return false;" class="selectpairs-pairone1" onPropertyChange="f1(this)" style="font-family:'Arial Narrow',sans-serif; font-size:10pt; background-color:rgb(247,225,213); border-width:1; border-color:maroon; border-style:solid;">
    <option selected="selected">(Estimado señor)</option>
    <option>(Estimada señora)</option>
    </select>
    </span></b></font></p>
</form>

<form action="javascript:void(0);">
    <p style="font-family:Arial,sans-serif; font-size:8pt; margin-top:1; margin-bottom:1;" align="center">
<font face="Arial"><b><span style="font-size:8pt;">                    
    <textarea rows=2 name="op" size="68" readonly value="(Dear Mr) (APELLIDO(S))," cols="58" class="es" style="font-family:Arial,sans-serif; font-size:10pt; background-color:rgb(222,239,254); border-width:2; border-color:blue; border-top-style:none; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; overflow:hidden;">(Dear Mr) (APELLIDO(S)),</textarea>&nbsp;</span></b></font></p>
    <p style="font-family:Arial,sans-serif; font-size:8pt; margin-top:1; margin-bottom:1;" align="center"><font face="Arial"><b><span style="font-size:8pt;">
  
  <select name="first" onMousewheel="self.focus(); return false;" class="selectpairs-pairone1" onPropertyChange="f2(this)" style="display:none; font-family:'Arial Narrow',sans-serif; font-size:10pt; background-color:rgb(222,239,254); border-width:1; border-color:blue; border-style:solid;">
    <option selected>(Dear Mr)</option>
    <option>(Dear Mrs)</option>
    </select></span></b></font></p>
 </form>

    <p align="center" style="font-family:Arial,sans-serif; font-size:8pt; margin-top:1; margin-bottom:1;">&nbsp;</p>
    <p align="center" style="font-family:Arial,sans-serif; font-size:8pt; margin-top:1; margin-bottom:1;"><font face="Arial"><b><font face="Arial"><b><font face="Arial"><b><font face="Arial"><b><font face="Arial"><b><font face="Arial"><b><font face="Arial"><b><font face="Arial"><b><font face="Arial"><b><font face="Arial"><span style="font-size:8pt;">&nbsp;</span></font></b></font></b></font></b></font></b></font></b></font></b></font></b></font></b></font></b></font></p>

</body>
</html>

**green** · 05-06-2011, 12:19 PM

I understand my above question may be too lengthy to answer. If so, could someone just point me to a website where perhaps compatibility between IE and FF are explained and I'll have another go at it myself?

Regards,

**jscheuer1** · 05-06-2011, 04:09 PM

My first impression was to find some sort of equivalent. But that looked overly complicated see:

http://www.tek-tips.com/viewthread.c...1469768&page=4

Then I figured, when does what happen? The f1 and f2 functions are to fire when javascript changes the selected index of the given select element. Since the functions are numbered and the elements are numbered, why not use the numbers? I tried it and it worked.

First, get rid of both of these, you won't need them in either browser:

Code:

 onPropertyChange="f1(this)"

and:

Code:

 onPropertyChange="f2(this)"

Next, change this:

Code:

	  if(j === nclasses.length && j > 0)
            e[i].selectedIndex = v;

to:

Code:

	  if(j === nclasses.length && j > 0){
            e[i].selectedIndex = v;
            window['f' + [i + 1]](e[i]);
          }

That's it. If you're having trouble following, feel free to ask questions. Here's the entire thing:

Code:

<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<style style=text/css>
option.yellow {background-color: #ffff00;}
option.blue {background-color: #00ffff;}
option.green {background-color: #008000; font-weight: bold; color: white;}
option.red {background-color: #ff0000; font-weight: bold; color: white;}
</style>


    <script type="text/javascript">
      function changeSelectValues(c, v) {
        var classes = c.split(" "),
	  nclasses = [];

	for(var i = 0; i < classes.length; ++i)
	  if(/^selectpairs-\w+$/.test(classes[i]))
	    nclasses.push(classes[i]);
	
        for(var i = 0, e = document.getElementsByTagName("select"); i < e.length; ++i) {
	  for(var j = 0; j < nclasses.length; ++j)
	    if(e[i].className.indexOf(nclasses[j]) === -1)
	      break;
	  if(j === nclasses.length && j > 0){
            e[i].selectedIndex = v;
            window['f' + [i + 1]](e[i]);
          }
	}
      }

      window.onload = function() {
        for(var i = 0, e = document.getElementsByTagName("select"); i < e.length; ++i) {
	  e[i].oldonchange = e[i].onchange;
	  e[i].onchange = function() {
	    if(typeof this.oldonchange === "function") this.oldonchange();
	    changeSelectValues(this.className, this.selectedIndex);
	  };
        }
	e = null;
      };
    </script>
    
    
<script type="text/javascript">

	function f1(el){
selectPrintf(el.form, 'op', '%s (APELLIDO(S)):', 'first');
}
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;
}

	function f2(el){
selectPrintf(el.form, 'op', '%s (APELLIDO(S)),', 'first');
}
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 bgcolor="#CAC6C6" oncontextmenu="return false;" onkeydown="onKeyDown()" text="black" link="blue" vlink="blue" alink="red">

<p align="center" style="font-family:Arial,sans-serif; font-size:8pt; margin-top:1; margin-bottom:1;">&nbsp;</p>
<p align="center" style="font-family:Arial,sans-serif; font-size:8pt; margin-top:1; margin-bottom:1;"><b><font face="Arial"><span style="font-size:8pt;">&nbsp;</span></font></b></p>
<p align="center" style="font-family:Arial,sans-serif; font-size:8pt; margin-top:1; margin-bottom:1;">&nbsp;</p>


<form action="javascript:void(0);">
    <p style="font-family:Arial,sans-serif; font-size:8pt; margin-top:1; margin-bottom:1;" align="center">
<a name="1"><font face="Arial"><b><span style="font-size:8pt;">                    
    <textarea rows=2 name="op" size="68" readonly value="(Estimado señor) (APELLIDO(S)):" cols="58" class="es" style="font-family:Arial,sans-serif; font-size:10pt; background-color:rgb(247,225,213); border-width:2; border-color:maroon; border-top-style:solid; border-right-style:solid; border-bottom-style:none; border-left-style:solid; overflow:hidden;">(Estimado señor) (APELLIDO(S)):</textarea>&nbsp;</span></b></font></a></p>
    <p style="font-family:Arial,sans-serif; font-size:8pt; margin-top:1; margin-bottom:1;" align="center"><font face="Arial"><b><span style="font-size:8pt;"> 
     
  
  <select name="first" onMousewheel="self.focus(); return false;" class="selectpairs-pairone1" style="font-family:'Arial Narrow',sans-serif; font-size:10pt; background-color:rgb(247,225,213); border-width:1; border-color:maroon; border-style:solid;">
    <option selected="selected">(Estimado señor)</option>
    <option>(Estimada señora)</option>
    </select>
    </span></b></font></p>
</form>

<form action="javascript:void(0);">
    <p style="font-family:Arial,sans-serif; font-size:8pt; margin-top:1; margin-bottom:1;" align="center">
<font face="Arial"><b><span style="font-size:8pt;">                    
    <textarea rows=2 name="op" size="68" readonly value="(Dear Mr) (APELLIDO(S))," cols="58" class="es" style="font-family:Arial,sans-serif; font-size:10pt; background-color:rgb(222,239,254); border-width:2; border-color:blue; border-top-style:none; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; overflow:hidden;">(Dear Mr) (APELLIDO(S)),</textarea>&nbsp;</span></b></font></p>
    <p style="font-family:Arial,sans-serif; font-size:8pt; margin-top:1; margin-bottom:1;" align="center"><font face="Arial"><b><span style="font-size:8pt;">
  
  <select name="first" onMousewheel="self.focus(); return false;" class="selectpairs-pairone1" style="display:none; font-family:'Arial Narrow',sans-serif; font-size:10pt; background-color:rgb(222,239,254); border-width:1; border-color:blue; border-style:solid;">
    <option selected>(Dear Mr)</option>
    <option>(Dear Mrs)</option>
    </select></span></b></font></p>
 </form>

    <p align="center" style="font-family:Arial,sans-serif; font-size:8pt; margin-top:1; margin-bottom:1;">&nbsp;</p>
    <p align="center" style="font-family:Arial,sans-serif; font-size:8pt; margin-top:1; margin-bottom:1;"><font face="Arial"><b><font face="Arial"><b><font face="Arial"><b><font face="Arial"><b><font face="Arial"><b><font face="Arial"><b><font face="Arial"><b><font face="Arial"><b><font face="Arial"><b><font face="Arial"><span style="font-size:8pt;">&nbsp;</span></font></b></font></b></font></b></font></b></font></b></font></b></font></b></font></b></font></b></font></p>

</body>
</html>

Note: I'm pretty sure that if someone took a broader view of this a much simpler overall method of doing it would emerge. However, this is a fix that works within the established code.

**green** · 05-09-2011, 06:17 PM

Thanks John for the work you put in there. Indeed, the code does work with the adaptation you made. It was my fault, however, for not including the "broader" view that's required.

The onPropertyChange="f1(this)" serve the function of distinguishing between additional pairs of translation boxes added to the page: f1 and f2; f3 and f4; and so on. Your code works for just one pair but not if others pairs are present on the page.

I've looked at the link you included but am unsure how to adapt cross-browser codes mentioned - the event handler: DOMAttrModified doesn't seem to work as a replacement for onpropertychange in Mozilla.

Here is a link to a test page (of course you can grab the code to test).

test page...

**jscheuer1** · 05-10-2011, 02:37 AM

A valid point, but that's not what I meant by taking a broader view. I meant that the whole thing can probably be simplified. Like with this new code, it shouldn't need f1, f2, f3, etc. One function should be able to do it all. And it can if we can find a way of giving it the information it needs for that purpose each time it's invoked. It also looks like way too much is going on with the javascript. I think we could probably simplify the entire thing.

That said, working from what you do have, the new code can be made to work in both browsers by once again getting rid of all of the inline onPropertyChange events. But before doing so, add the function name to the class designation, example:

Code:

class="selectpairs-pairone1" onPropertyChange="f2(this)"

becomes:

Code:

class="selectpairs-pairone1 f2"

Once you make that change for all of them, change this function:

Code:

      function changeSelectValues(c, v) {
        var classes = c.split(" "),
	  nclasses = [];

	for(var i = 0; i < classes.length; ++i)
	  if(/^selectpairs-\w+$/.test(classes[i]))
	    nclasses.push(classes[i]);
	
        for(var i = 0, e = document.getElementsByTagName("select"); i < e.length; ++i) {
	  for(var j = 0; j < nclasses.length; ++j)
	    if(e[i].className.indexOf(nclasses[j]) === -1)
	      break;
	  if(j === nclasses.length && j > 0)
            e[i].selectedIndex = v;
	}
      }

to:

Code:

      function changeSelectValues(c, v) {
        var classes = c.split(" "),
	  nclasses = [], func;

	for(var i = 0; i < classes.length; ++i){
	  if(/^selectpairs-\w+$/.test(classes[i]))
	    nclasses.push(classes[i]);
	  if(/^f\d+$/.test(classes[i]))
	    func = classes[i];
	}
	
        for(var i = 0, e = document.getElementsByTagName("select"); i < e.length; ++i) {
	  for(var j = 0; j < nclasses.length; ++j)
	    if(e[i].className.indexOf(nclasses[j]) === -1)
	      break;
	  if(j === nclasses.length && j > 0){
            e[i].selectedIndex = v;
            window[func](e[i]);
          }
	}
      }

**green** · 05-12-2011, 02:46 PM

John, that works just fine. Thank you very much for the invaluable service you offer at Dynamic Drive.

**green** · 07-27-2011, 07:24 AM

Here is a fully working eg IE but not Firefox relating to my post below; just copy and paste:

Code:

<html>
<head>

    <script type="text/javascript">
      function changeSelectValues(c, v) {
        var classes = c.split(" "),
	  nclasses = [];

	for(var i = 0; i < classes.length; ++i)
	  if(/^selectpairs-\w+$/.test(classes[i]))
	    nclasses.push(classes[i]);
	
        for(var i = 0, e = document.getElementsByTagName("select"); i < e.length; ++i) {
	  for(var j = 0; j < nclasses.length; ++j)
	    if(e[i].className.indexOf(nclasses[j]) === -1)
	      break;
	  if(j === nclasses.length && j > 0)
            e[i].selectedIndex = v;
	}
      }

      window.onload = function() {
        for(var i = 0, e = document.getElementsByTagName("select"); i < e.length; ++i) {
	  e[i].oldonchange = e[i].onchange;
	  e[i].onchange = function() {
	    if(typeof this.oldonchange === "function") this.oldonchange();
	    changeSelectValues(this.className, this.selectedIndex);
	  };
        }
	e = null;
      };
    </script>
    
<script type="text/javascript">

	function f1(el){
selectPrintf(el.form, 'op', 'If (you) %s get %s, please (let me know) %s.', 'second', 'third', 'fifth');
}
function selectPrintf(frm, opEl, baseStr) {
  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;
}

	function f2(el){
selectPrintf(el.form, 'op', 'Si %s %s %s recibido, ruego me lo %s %s.', 'first', 'second', 'third', 'fourth', 'fifth');
}
function selectPrintf(frm, opEl, baseStr) {
  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 bgcolor="#CAC6C6" text="black" link="blue" vlink="blue" alink="red">
<p align="center" style="font-family:Arial,sans-serif; font-size:8pt; margin-top:1pt; margin-bottom:1pt;"><b><font face="Arial"><span style="font-size:8pt;">

</span></font></b><form action="javascript:void(0);">
    <p style="font-family:Arial,sans-serif; font-size:8pt; margin-top:1; margin-bottom:1;" align="center">
    <font face="Arial"><span style="font-size:8pt;"><a name="1">                       
    <textarea rows=2 name="op" size="68" readonly value="Si (no) (lo) (has) recibido, ruego me lo (comuniques) (hoy)." cols="58" class="es" style="font-family:Arial,sans-serif; font-size:10pt; background-color:rgb(247,225,213); border-width:2; border-color:maroon; border-top-style:solid; border-right-style:solid; border-bottom-style:none; border-left-style:solid; 
    overflow:hidden;">Si (no) (lo) (has) recibido, ruego me lo (comuniques) (hoy).</textarea>
     </a></span></font>    <p style="font-family:Arial,sans-serif; font-size:8pt; margin-top:1; margin-bottom:1;" align="center"><font face="Arial"><font face="Arial"><span style="font-size:8pt;"><br> 
    &nbsp; 
  
   <select name="first" onMousewheel="self.focus(); return false;" class="selectpairs-pairone2" onPropertyChange="f2(this)" style=" font-family:'Arial Narrow',sans-serif; font-size:10pt; background-color:rgb(247,225,213); border-width:1; border-color:maroon; border-style:solid;">
    <option selected>(no)</option>
    <option></option>
        </select>
	
   <select name="second" onMousewheel="self.focus(); return false;" class="selectpairs-pairone3" onPropertyChange="f2(this)" style=" font-family:'Arial Narrow',sans-serif; font-size:10pt; background-color:rgb(247,225,213); border-width:1; border-color:maroon; border-style:solid;">
    <option selected>(lo)</option>
    <option>(la)</option>
    <option>(los)</option>
    <option>(las)</option>
        </select>
	
      <select name="third" onMousewheel="self.focus(); return false;" class="selectpairs-pairone1" onPropertyChange="f2(this)" style=" font-family:'Arial Narrow',sans-serif; font-size:10pt; background-color:rgb(247,225,213); border-width:1; border-color:maroon; border-style:solid;">
    <option selected>(has)</option>
    <option>(ha)</option>
    <option>(habéis)</option>
    <option>(han)</option>
        </select>
	
   <select name="fourth" onMousewheel="self.focus(); return false;" class="selectpairs-pairone4" onPropertyChange="f2(this)" style=" font-family:'Arial Narrow',sans-serif; font-size:10pt; background-color:rgb(247,225,213); border-width:1; border-color:maroon; border-style:solid;">
    <option selected>(comuniques)</option>
    <option>(comunique)</option>
        </select>
	
	<select name="fifth" onMousewheel="self.focus(); return false;" class="selectpairs-pairone5" onPropertyChange="f2(this)" style=" font-family:'Arial Narrow',sans-serif; font-size:10pt; background-color:rgb(247,225,213); border-width:1; border-color:maroon; border-style:solid;">
    <option selected="selected">(hoy)</option>
    <option>(esta mañana)</option>
    <option>(esta tarde)</option>
    <option>(esta tarde noche)</option>
    <option>(esta noche)</option>
    <option class="yellow">(ahora)</option>
    <option>(más tarde)</option>
    <option>(después del trabajo)</option>
    <option>(mañana)</option>
    <option>(tan pronto como sea posible)</option>
    <option class="blue">(a (hora))</option>
    <option>(el (día y fecha))</option>
    </select>
   	</span></font></font></p>

</form>


<form action="javascript:void(0);">
    <p style="font-family:Arial,sans-serif; font-size:8pt; margin-top:1; margin-bottom:1;" align="center">
<font face="Arial">    <font face="Arial"><span style="font-size:8pt;">                        
    <textarea rows=2 name="op" size="68" readonly value="If (you) (didn't) get (it), please (let me know) (today)." cols="58" class="es" style="font-family:Arial,sans-serif; font-size:10pt; background-color:rgb(222,239,254); border-width:2; border-color:blue; border-top-style:none; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; 
    overflow:hidden;">If (you) (didn't) get (it), please (let me know) (today).</textarea>
        </span></font></font>    <p style="font-family:Arial,sans-serif; font-size:8pt; margin-top:1; margin-bottom:1;"><font face="Arial"><font face="Arial"><span style="font-size:8pt;"><br>
    
    </span></font></font><p style="font-family:Arial,sans-serif; font-size:8pt; margin-top:1; margin-bottom:1;" align="center"><font face="Arial"><font face="Arial"><span style="font-size:8pt;">
  
   <select name="first" onMousewheel="self.focus(); return false;" class="selectpairs-pairone1" style="display:none; font-family:'Arial Narrow',sans-serif; font-size:10pt; background-color:rgb(222,239,254); border-width:1; border-color:blue; border-style:solid;">
<option selected>(you)</option>
    </select>
    
    <select name="second" onMousewheel="self.focus(); return false;" class="selectpairs-pairone2" onPropertyChange="f1(this)" style="display:none; font-family:'Arial Narrow',sans-serif; font-size:10pt; background-color:rgb(222,239,254); border-width:1; border-color:blue; border-style:solid;">
<option selected>(didn't)</option>
    <option>(did)</option>
    </select>
    
   <select name="third" onMousewheel="self.focus(); return false;" class="selectpairs-pairone3" onPropertyChange="f1(this)" style="display:none; font-family:'Arial Narrow',sans-serif; font-size:10pt; background-color:rgb(222,239,254); border-width:1; border-color:blue; border-style:solid;">
    <option selected>(it)</option>
    <option>(it)</option>
    <option>(them)</option>
    <option>(them)</option>
    </select> 
    
   <select name="fourth" onMousewheel="self.focus(); return false;" class="selectpairs-pairone4" style="display:none; font-family:'Arial Narrow',sans-serif; font-size:10pt; background-color:rgb(222,239,254); border-width:1; border-color:blue; border-style:solid;">
    <option selected>(let me know)</option>
    </select>
    
    <select name="fifth" onMousewheel="self.focus(); return false;" class="selectpairs-pairone5" onPropertyChange="f1(this)" style="display:none; font-family:'Arial Narrow',sans-serif; font-size:10pt; background-color:rgb(222,239,254); border-width:1; border-color:blue; border-style:solid;">
    <option selected>(today)</option>
    <option>(this morning)</option>
    <option>(this afternoon)</option>
    <option>(this evening)</option>
    <option>(tonight)</option>
    <option class="yellow">(now)</option>
    <option>(later)</option>
    <option>(after work)</option>
    <option>(tomorrow)</option>
    <option>(as soon as possible)</option>
    <option class="blue">(at (hora))</option>
    <option>(día y fecha)</option>
    </select> 
   	</span></font></font></p>
 </form>
 
</body>
</html>

**green** · 07-27-2011, 07:41 AM

I've run into problems with above code, I'm afraid, (despite it working fine with the example drop down box I provided above). The aim here, if you remember, is to get it working with IE and Mozilla Firefox.

When I began adapting to the new code provided by JScheuer, some of the drop down box pairs I'd previously developed failed to work. This is due to the fact that the "function f1" (translated phrase in English) and "function f2" (equivalent in Spanish) are not always identical and so the values of both are required.

The new code from JScheuer (Firefox compatible) assumes the values are identical; and, in this example (see above) it works fine:

Code:

	function f1(el){
selectPrintf(el.form, 'op', '%s (APELLIDO(S)):', 'first');

	function f2(el){
selectPrintf(el.form, 'op', '%s (APELLIDO(S)),', 'first');

However, some pairs work independently and together at the same time or the different %s elements may not be in the same order (as Spanish syntax can differ from English syntax), eg:

Code:

	function f1(el){
selectPrintf(el.form, 'op', 'If (you) %s get %s, please (let me know) %s.', 'second', 'third', 'fifth');

	function f2(el){
selectPrintf(el.form, 'op', 'Si %s %s %s recibido, ruego me lo %s %s.', 'first', 'second', 'third', 'fourth', 'fifth');

(See full code in previous post))

So as not to impinge too much on John's valuable time (and realising the fault was mine), I tried to adapt the Spanish and English phrases in this "email writer help tool" to fit the code. In the end I have had to give up as the task was impossible in many Spanish - English combinations. Does this need just tweaking or is it more complex? Any ideas?

Due to space restrictions, I've included a working eg (for IE only, of course) in the PREVIOUS post.
Mike.

**jscheuer1** · 07-31-2011, 05:53 PM

Change this and similar:

Code:

<select name="first" onMousewheel="self.focus(); return false;" class="selectpairs-pairone2" onPropertyChange="f2(this)"

to:

Code:

<select name="first" onMousewheel="self.focus(); return false;" class="selectpairs-pairone2 f2"

using the function name f1 or f2 or whatever it is. It can be f0 to f1000 or more, as long as you have a valid function for it.

And change this:

Code:

      function changeSelectValues(c, v) {
        var classes = c.split(" "),
	  nclasses = [];

	for(var i = 0; i < classes.length; ++i)
	  if(/^selectpairs-\w+$/.test(classes[i]))
	    nclasses.push(classes[i]);
	
        for(var i = 0, e = document.getElementsByTagName("select"); i < e.length; ++i) {
	  for(var j = 0; j < nclasses.length; ++j)
	    if(e[i].className.indexOf(nclasses[j]) === -1)
	      break;
	  if(j === nclasses.length && j > 0)
            e[i].selectedIndex = v;
	}
      }

to:

Code:

      function changeSelectValues(c, v) {
        var classes = c.split(" "),
	  nclasses = [], func;

	for(var i = 0; i < classes.length; ++i)
	  if(/^selectpairs-\w+$/.test(classes[i]))
	    nclasses.push(classes[i]);
	
        for(var i = 0, e = document.getElementsByTagName("select"); i < e.length; ++i) {
	  for(var j = 0; j < nclasses.length; ++j)
	    if(e[i].className.indexOf(nclasses[j]) === -1)
	      break;
	  if(j === nclasses.length && j > 0){
            e[i].selectedIndex = v;
            if((func = /\bf\d+\b/.exec(e[i].className))){
              window[func[0]](e[i]);
            }
          }
	}
      }

Working demo in next post.

**jscheuer1** · 07-31-2011, 05:53 PM

Code:

<html>
<head>

    <script type="text/javascript">
      function changeSelectValues(c, v) {
        var classes = c.split(" "),
	  nclasses = [], func;

	for(var i = 0; i < classes.length; ++i)
	  if(/^selectpairs-\w+$/.test(classes[i]))
	    nclasses.push(classes[i]);
	
        for(var i = 0, e = document.getElementsByTagName("select"); i < e.length; ++i) {
	  for(var j = 0; j < nclasses.length; ++j)
	    if(e[i].className.indexOf(nclasses[j]) === -1)
	      break;
	  if(j === nclasses.length && j > 0){
            e[i].selectedIndex = v;
            if((func = /\bf\d+\b/.exec(e[i].className))){
              window[func[0]](e[i]);
            }
          }
	}
      }

      window.onload = function() {
        for(var i = 0, e = document.getElementsByTagName("select"); i < e.length; ++i) {
	  e[i].oldonchange = e[i].onchange;
	  e[i].onchange = function() {
	    if(typeof this.oldonchange === "function") this.oldonchange();
	    changeSelectValues(this.className, this.selectedIndex);
	  };
        }
	e = null;
      };
    </script>
    
<script type="text/javascript">

	function f1(el){
selectPrintf(el.form, 'op', 'If (you) %s get %s, please (let me know) %s.', 'second', 'third', 'fifth');
}
function selectPrintf(frm, opEl, baseStr) {
  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;
}

	function f2(el){
selectPrintf(el.form, 'op', 'Si %s %s %s recibido, ruego me lo %s %s.', 'first', 'second', 'third', 'fourth', 'fifth');
}
function selectPrintf(frm, opEl, baseStr) {
  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 bgcolor="#CAC6C6" text="black" link="blue" vlink="blue" alink="red">
<p align="center" style="font-family:Arial,sans-serif; font-size:8pt; margin-top:1pt; margin-bottom:1pt;"><b><font face="Arial"><span style="font-size:8pt;">

</span></font></b><form action="javascript:void(0);">
    <p style="font-family:Arial,sans-serif; font-size:8pt; margin-top:1; margin-bottom:1;" align="center">
    <font face="Arial"><span style="font-size:8pt;"><a name="1">                       
    <textarea rows=2 name="op" size="68" readonly value="Si (no) (lo) (has) recibido, ruego me lo (comuniques) (hoy)." cols="58" class="es" style="font-family:Arial,sans-serif; font-size:10pt; background-color:rgb(247,225,213); border-width:2; border-color:maroon; border-top-style:solid; border-right-style:solid; border-bottom-style:none; border-left-style:solid; 
    overflow:hidden;">Si (no) (lo) (has) recibido, ruego me lo (comuniques) (hoy).</textarea>
     </a></span></font>    <p style="font-family:Arial,sans-serif; font-size:8pt; margin-top:1; margin-bottom:1;" align="center"><font face="Arial"><font face="Arial"><span style="font-size:8pt;"><br> 
    &nbsp; 
  
   <select name="first" onMousewheel="self.focus(); return false;" class="selectpairs-pairone2 f2"
 style=" font-family:'Arial Narrow',sans-serif; font-size:10pt; background-color:rgb(247,225,213); border-width:1; border-color:maroon; border-style:solid;">
    <option selected>(no)</option>
    <option></option>
        </select>
	
   <select name="second" onMousewheel="self.focus(); return false;" class="selectpairs-pairone3 f2"
 style=" font-family:'Arial Narrow',sans-serif; font-size:10pt; background-color:rgb(247,225,213); border-width:1; border-color:maroon; border-style:solid;">
    <option selected>(lo)</option>
    <option>(la)</option>
    <option>(los)</option>
    <option>(las)</option>
        </select>
	
      <select name="third" onMousewheel="self.focus(); return false;" class="selectpairs-pairone1 f2"
 style=" font-family:'Arial Narrow',sans-serif; font-size:10pt; background-color:rgb(247,225,213); border-width:1; border-color:maroon; border-style:solid;">
    <option selected>(has)</option>
    <option>(ha)</option>
    <option>(habéis)</option>
    <option>(han)</option>
        </select>
	
   <select name="fourth" onMousewheel="self.focus(); return false;" class="selectpairs-pairone4 f2"
 style=" font-family:'Arial Narrow',sans-serif; font-size:10pt; background-color:rgb(247,225,213); border-width:1; border-color:maroon; border-style:solid;">
    <option selected>(comuniques)</option>
    <option>(comunique)</option>
        </select>
	
	<select name="fifth" onMousewheel="self.focus(); return false;" class="selectpairs-pairone5 f2"
 style=" font-family:'Arial Narrow',sans-serif; font-size:10pt; background-color:rgb(247,225,213); border-width:1; border-color:maroon; border-style:solid;">
    <option selected="selected">(hoy)</option>
    <option>(esta mañana)</option>
    <option>(esta tarde)</option>
    <option>(esta tarde noche)</option>
    <option>(esta noche)</option>
    <option class="yellow">(ahora)</option>
    <option>(más tarde)</option>
    <option>(después del trabajo)</option>
    <option>(mañana)</option>
    <option>(tan pronto como sea posible)</option>
    <option class="blue">(a (hora))</option>
    <option>(el (día y fecha))</option>
    </select>
   	</span></font></font></p>

</form>


<form action="javascript:void(0);">
    <p style="font-family:Arial,sans-serif; font-size:8pt; margin-top:1; margin-bottom:1;" align="center">
<font face="Arial">    <font face="Arial"><span style="font-size:8pt;">                        
    <textarea rows=2 name="op" size="68" readonly value="If (you) (didn't) get (it), please (let me know) (today)." cols="58" class="es" style="font-family:Arial,sans-serif; font-size:10pt; background-color:rgb(222,239,254); border-width:2; border-color:blue; border-top-style:none; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; 
    overflow:hidden;">If (you) (didn't) get (it), please (let me know) (today).</textarea>
        </span></font></font>    <p style="font-family:Arial,sans-serif; font-size:8pt; margin-top:1; margin-bottom:1;"><font face="Arial"><font face="Arial"><span style="font-size:8pt;"><br>
    
    </span></font></font><p style="font-family:Arial,sans-serif; font-size:8pt; margin-top:1; margin-bottom:1;" align="center"><font face="Arial"><font face="Arial"><span style="font-size:8pt;">
  
   <select name="first" onMousewheel="self.focus(); return false;" class="selectpairs-pairone1" style="display:none; font-family:'Arial Narrow',sans-serif; font-size:10pt; background-color:rgb(222,239,254); border-width:1; border-color:blue; border-style:solid;">
<option selected>(you)</option>
    </select>
    
    <select name="second" onMousewheel="self.focus(); return false;" class="selectpairs-pairone2 f1"
 style="display:none; font-family:'Arial Narrow',sans-serif; font-size:10pt; background-color:rgb(222,239,254); border-width:1; border-color:blue; border-style:solid;">
<option selected>(didn't)</option>
    <option>(did)</option>
    </select>
    
   <select name="third" onMousewheel="self.focus(); return false;" class="selectpairs-pairone3 f1"
 style="display:none; font-family:'Arial Narrow',sans-serif; font-size:10pt; background-color:rgb(222,239,254); border-width:1; border-color:blue; border-style:solid;">
    <option selected>(it)</option>
    <option>(it)</option>
    <option>(them)</option>
    <option>(them)</option>
    </select> 
    
   <select name="fourth" onMousewheel="self.focus(); return false;" class="selectpairs-pairone4" style="display:none; font-family:'Arial Narrow',sans-serif; font-size:10pt; background-color:rgb(222,239,254); border-width:1; border-color:blue; border-style:solid;">
    <option selected>(let me know)</option>
    </select>
    
    <select name="fifth" onMousewheel="self.focus(); return false;" class="selectpairs-pairone5 f1"
 style="display:none; font-family:'Arial Narrow',sans-serif; font-size:10pt; background-color:rgb(222,239,254); border-width:1; border-color:blue; border-style:solid;">
    <option selected>(today)</option>
    <option>(this morning)</option>
    <option>(this afternoon)</option>
    <option>(this evening)</option>
    <option>(tonight)</option>
    <option class="yellow">(now)</option>
    <option>(later)</option>
    <option>(after work)</option>
    <option>(tomorrow)</option>
    <option>(as soon as possible)</option>
    <option class="blue">(at (hora))</option>
    <option>(día y fecha)</option>
    </select> 
   	</span></font></font></p>
 </form>
 
</body>
</html>