JavaScript - Safari Compatibility Issue With Dynamic Population Of Selects

<form action="index.php" method="GET" name="qsform" id="qsform">
<input type="hidden" name="p" id="p" value="compdetails" style="border:1px solid #000000;" />
<input type="text" name="quicksearch" id="quicksearch" value="Find Company" style="border:1px solid #000000;" onFocus="clearText(this)" onBlur="clearText(this)" />
<input type="hidden" name="cid" id="cid" value="" style="border:1px solid #000000;" />&nbsp;
<input type="submit" name="go" id="go" value="Go" disabled="true" onmouseover="if (document.qsform.cid.value!='') { document.qsform.go.disabled=false; }" />
</form>

<SCRIPT LANGUAGE="JavaScript">



var Tborder = .05
var howmanyIMG = 15
var winHeight = Math.floor(window.innerHeight);
var winWidth = Math.floor(window.innerWidth);
var BoxHeight = Math.floor((winHeight * (1-Tborder)) / 3);
var BoxWidth = BoxHeight;
var howmanyx = Math.floor(winWidth / BoxWidth) + 1;
var howmanyy = 3;
var HowMany = howmanyx * howmanyy;
var used = new Array(howmanyIMG);
var CMYG = ["00AEEF","EC008C","FFF200","41AD49"]

function RNDy(numby){
	return Math.floor(Math.random()*numby);
}



function getUniq(){ 
/* alert("run getuniq");*/
var n; 
while ( used[ n = RNDy(howmanyIMG) ] ){} 
used[ n ] = true; 

return n; 
}


function ColorRND() { 
	
	if (RNDy(4) ==1) {
		return true;
	}else{
		return false;
	}
}



function PlacePop (HMx,HMy){
	
	
	var counter = 0;
	var countc = 0;
	

	for(x=0;x<=HMx;x++){
		var countr = 0;
		for(y=0;y<HMy;y++){

				
			var divy = document.createElement("div");
			var divyID = 'box' + counter;

			divy.setAttribute('id', divyID)
	
			divy.style.position="absolute";    
	
			divy.style.zIndex = counter + 3;
			divy.style.visibility = 'visible'; 
			divy.style.borderWidth = '1';
			divy.style.borderColor = '#000000';
			divy.style.pixelLeft= x * BoxWidth + (2 * countc);
	
			divy.style.pixelTop= y * BoxHeight + (winHeight * Tborder) + (2 * countr);
			divy.style.pixelWidth=  BoxWidth;
			divy.style.pixelHeight= BoxHeight;
			if (ColorRND()){
				
				/*divy.innerHTML = 'color';*/
					divy.style.backgroundColor = "#" + CMYG[RNDy(4)];
					
				
			}else{
				/*divy.innerHTML = 'image';*/
				divy.style.backgroundImage = "url(resourses/images/portfolio/" + getUniq() + ".png)";
			divy.style.backgroundPosition = "center";
			
			/*RNDy(100) + "% " + RNDy(100) + "%";*/
			}
	document.body.appendChild(divy);
			counter++;
			countr++;
		
		}countc++;

	}	
	/*
	 
	 alert("ran" + counter + " times");*/
}
	
/* used = null;*/

</script>

function randomusers(){
 
    var given = 2, used = {}, randnum, opts = $('#select1 option'), olen = opts.length, hiddiv = $('#hiddendiv');
    function ran() { // generate a unique random number
      randnum = Math.floor(Math.random() * olen);
      return used['u'+randnum] ? ran() : randnum;
    }
    for (var i = 0; i < given; i++) { // get the correct quantity of randoms
      used['u'+ran()] = true;
    }
    var players = opts.filter(function(index) { // remove all options that are not one of the randoms
      return !!used['u'+index];
    }).appendTo('#select2');
    
}

<form action="search.php" method="get">

<select name="RingType">
<option value="Nose">Nose</option>
<option value="Toe">Toe</option>
<option value="Belly">Belly</option>
</select>

<select name="NecklaceType">
<option value="gold">Gold</option>
<option value="diamond">diamond</option>
<option value="pearl">pearl</option>
</select>

<input type="text" size="60" name="keywords" />
<input class="submit" type="submit" value="Search" />
</form>

function MoveSelected(from, to) {
		var lstFrom = $(from);
		var lstTo = $(to);

		for (var i = 0; i<lstFrom.length;i++) {
			if ( lstFrom[i].selected ) {
				var elOptNew = document.createElement('option');
		    	elOptNew.text = lstFrom[i].text;
    			elOptNew.value = lstFrom[i].value;
			    try {
					lstTo.add(elOptNew, null); // standards compliant; doesn't work in IE
			    } catch(ex) {
					lstTo.add(elOptNew); // IE only
			    }
			}
		}
		for (var i = lstFrom.length-1; i>=0;i--) {
			if ( lstFrom[i].selected ) {
				lstFrom.options[i] = null;
			}										
		}					
	}

<td width="10%" valign="center">
	<a href="javascript: MoveSelected('lstAvailProd','lstSelectProd');"><IMG SRC="buttons/right_arrow.gif" style="padding-bottom: 2px;" /></a><br /><br />
	<a href="javascript: MoveSelected('lstSelectProd','lstAvailProd');"><IMG SRC="buttons/left_arrow.gif" /></a>
</td>

<select name="lstAvailProd" id="lstAvailProd" multiple="true" size="8" style="width: 250px;">
	<option value="-1">{All Products}</option>
	<option value="1">Product 1</option>
	<option value="2">Product 2</option>
	<option value="3">Product 3</option>
	<option value="4">Product 4</option>
	<option value="5">Product 5</option>
</select>

<select name="lstSelectProd" id="lstSelectProd" multiple="true" size="8" style="width: 250px;">
</select>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Populate Textarea Based on Radio Button Selection</title>

<script>
text = new Array()
text[0] = Array('Hotel', 'Motel'); 
text[1] = Array('Couch', 'Bed', 'Chair'); 
function populate(r,f){
t=-1;
for(var i=0;i<f.elements[r].length;i++){
if (f.elements[r][i].checked){
var t=i;
}
}
if(t>-1){
    f.thefirsttextarea.value= text[t].toString().replace(/,/gi,"\n");
}
}
</script>

</head>
<body>
<form name="frm">

 <input type="radio" name="test" value="0" onClick="populate(this.name,this.form)">

 <input type="radio" name="test" value="1" onClick="populate(this.name,this.form)">
 
 <textarea name="thefirsttextarea"></textarea>
<input type="submit" value="submit" />
</form>

</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Populate Multiple Textareas Based on Radio Button Selection</title>

<script>
text = new Array()
text[0] = Array('Hotel', 'Motel'); 
text[1] = Array('Couch', 'Bed', 'Chair'); 
function populate(r,f){
t=-1;
for(var i=0;i<f.elements[r].length;i++){
if (f.elements[r][i].checked){
var t=i;
}
}
if(t>-1){
    f.thefirsttextarea.value= text[t].toString().replace(/,/gi,"\n");
}
}
</script>

<script>
textt = new Array()
<!--default-->
text[0] = Array('Ham', 'Turkey', 'Chicken'); 

<!--all-->
text[1] = Array('Beer', 'Soda', 'Water');

<!--johnny havana-->
text[2] = Array('Milk', 'Cheese', 'Butter');


function populate(r,f){
t=-1;
for(var i=0;i<f.elements[r].length;i++){
if (f.elements[r][i].checked){
var t=i;
}
}
if(t>-1){
    f.SECONDFORM.value= text[t].toString().replace(/,/gi,"\n");
}
}
</script>

</head>
<body>
<form name="form">

 <input type="radio" name="test" value="0" onClick="populate(this.name,this.form)">

 <input type="radio" name="test" value="1" onClick="populate(this.name,this.form)">
 
 <textarea name="thefirsttextarea"></textarea>
<input type="submit" value="submit" />
</form>

<form name="anotherform">

 <input type="radio" name="anothertest" value="0" onClick="populate(this.name,this.form)">

 <input type="radio" name="anothertest" value="1" onClick="populate(this.name,this.form)">
 
 <textarea name="SECONDFORM"></textarea>
<input type="submit" value="submit" />
</form>
</body>
</html>

</script><script type="text/javascript" src="orderform04.js"></script>

<script type="text/javascript">
    //<![CDATA[
    window.onload = setupScripts;
    function setupScripts()
    {
         var anOrder1 = new OrderForm();
    }
    //]]>
    </script>

// mredkj.com
// OrderForm.js - v0.4
// v0.4 - 2007-02-01
// v0.3 - 2006-04-09
// v0.2 - 2006-04-08
// v0.1 - 2006-04-06

function OrderForm(prefix, precision, firstChoice) {
     
     this.prefix = prefix ? prefix : '';
     
     // ****************************
     // Configure here
     // ****************************
     // names - Set these according to how the html ids are set
     this.FORM_NAME = this.prefix + 'frmOrder';
     this.BTN_TOTAL = this.prefix + 'btnTotal';
     this.TXT_OUT = this.prefix + 'txtTotal';
     
     // partial names - Set these according to how the html ids are set
     this.CHK = this.prefix + 'chk';
     this.SEL = this.prefix + 'sel';
     this.PRICE = this.prefix + 'txtPrice';
     
     // precision for the decimal places
     // If not set, then no decimal adjustment is made
     this.precision = precision ? precision : -1;
     
     // if the drop down has the first choice after index 1
     // this is used when checking or unchecking a checkbox
     this.firstChoice = firstChoice ? firstChoice : 1;
     // ****************************
     
     // form
     this.frm = document.getElementById(this.FORM_NAME);
     
     // checkboxes
     this.chkReg = new RegExp(this.CHK + '([0-9]+)');
     this.getCheck = function(chkId) {
          return document.getElementById(this.CHK + chkId);
     };
     
     // selects
     this.selReg = new RegExp(this.SEL + '([0-9]+)');
     this.getSelect = function(selId) {
          return document.getElementById(this.SEL + selId);
     };
     
     // price spans
     this.priceReg = new RegExp(this.PRICE + '([0-9]+)');
     
     // text output
     this.txtOut = document.getElementById(this.TXT_OUT);
     
     // button
     this.btnTotal = document.getElementById(this.BTN_TOTAL);
     
     // price array
     this.prices = new Array();
     
     var o = this;
     this.getCheckEvent = function() {
          return function() {
               o.checkRetotal(o, this);
          };
     };
     
     this.getSelectEvent = function() {
          return function() {
               o.totalCost(o);
          };
     };
     
     this.getBtnEvent = function() {
          return function() {
               o.totalCost(o);
          };
     };
     
     /*
      * Calculate the cost
      *
      * Required:
      * Span tags around the prices with IDs formatted
      * so each item's numbers correspond its select elements and input checkboxes.
      */
     this.totalCost = function(orderObj) {
          var spanObj = orderObj.frm.getElementsByTagName('span');
          var total = 0.0;
          for (var i=0; i<spanObj.length; i++) {
               var regResult = orderObj.priceReg.exec(spanObj.id);
               if (regResult) {
                    var itemNum = regResult[1];
                    var chkObj = orderObj.getCheck(itemNum);
                    var selObj = orderObj.getSelect(itemNum);
                    var price = orderObj.prices[itemNum];
                    var quantity = 0;
                    if (selObj) {
                         quantity = parseFloat(selObj.options[selObj.selectedIndex].text);
                         quantity = isNaN(quantity) ? 0 : quantity;
                         if (chkObj) chkObj.checked = quantity;
                    } else if (chkObj) {
                         quantity = chkObj.checked ? 1 : 0;
                    }
                    total += quantity * price;
               }
          }
          if (this.precision == -1) {
               orderObj.txtOut.value = total
          } else {
               orderObj.txtOut.value = total.toFixed(this.precision);
          }
     };

     /*
      * Handle clicks on the checkboxes
      *
      * Required:
      * The corresponding select elements and input checkboxes need to be numbered the same
      *
      */
     this.checkRetotal = function(orderObj, obj) {
          var regResult = orderObj.chkReg.exec(obj.id);
          if (regResult) {
               var optObj = orderObj.getSelect(regResult[1]);
               if (optObj) {
                    if (obj.checked) {
                         optObj.selectedIndex = orderObj.firstChoice;
                    } else {
                         optObj.selectedIndex = 0;
                    }
               }
               orderObj.totalCost(orderObj);
          }
     };
     
     /*
      * Set up events
      */
     this.setEvents = function(orderObj) {
          var spanObj = orderObj.frm.getElementsByTagName('span');
          for (var i=0; i<spanObj.length; i++) {
               var regResult = orderObj.priceReg.exec(spanObj.id);
               if (regResult) {
                    var itemNum = regResult[1];
                    var chkObj = orderObj.getCheck(itemNum);
                    var selObj = orderObj.getSelect(itemNum);
                    if (chkObj) {
                         chkObj.onclick = orderObj.getCheckEvent();
                    }
                    if (selObj) {
                         selObj.onchange = orderObj.getSelectEvent();
                    }
                    if (orderObj.btnTotal) {
                         orderObj.btnTotal.onclick = orderObj.getBtnEvent();
                    }
               }
          }
     };
     this.setEvents(this);

     /*
      *
      * Grab the prices from the html
      * Required:
      * Prices should be wrapped in span tags, numbers only.
      */
     this.grabPrices = function(orderObj) {
          var spanObj = orderObj.frm.getElementsByTagName('span');
          for (var i=0; i<spanObj.length; i++) {
               if (orderObj.priceReg.test(spanObj.id)) {
                    var regResult = orderObj.priceReg.exec(spanObj.id);
                    if (regResult) {
                         orderObj.prices[regResult[1]] = parseFloat(spanObj.innerHTML);
                    }
               }
          }
     };
     this.grabPrices(this);
     
}

function advCalc(selected) {

	var result = Number(document.formmain.elements["quantity"+selected].value) * (Number(document.formmain.elements["provideamount"+selected].value) - Number(document.formmain.elements["supplyamount"+selected].value)) ;

	result = result.toFixed(2) ;
	result = addCommas(result) ;
	
	document.getElementById("total"+selected).innerHTML = result ;

}

function addPart(divName){
          var newdiv = document.createElement('div') ;
		  newdiv.setAttribute('id', 'partrow' + counter) ;
		  newdiv.setAttribute('style', 'clear:both;') ;
          newdiv.innerHTML = "<div style='float:left;width:40px;text-align:center;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc('" + counter + "')\" id=' quantity " + counter + "' type='text' value='1' size='1'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 0px 0px 0px;'>\r<input id='manufacturer" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:95px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='partnumber" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:80px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='supplier" + counter + "'type='text' value='' size='4'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='type" + counter + "'type='text' value='' size='6'/>\r</div>\r<div style='float:left;width:85px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='deliverytime" + counter + "'type='text' value='' size='13'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select id='supplyCurrency" + counter + "'>\r<option value='pound' selected='selected'>&pound;</option><option value='dol'>$</option><option value='euro'>&euro;</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\')\" id=' supplyamount " + counter + "'type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select name='provideCurrency" + counter + "'><option value='pound' selected='selected'>&pound;</option><option value='dol'>$</option><option value='euro'>&euro;</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\') id=' provideamount " + counter + "' type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:20px;text-align:left;margin:5px 0px 0px 45px;'>\r<strong>&pound;</strong>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 5px 0px 0px;'><span id=' total " + counter + "'></span></div> \r" ;
          document.getElementById(divName).appendChild(newdiv) ;
          counter++ ;
}