JavaScript - 2 Select Boxes In 1 Form With Onchange Display

<form name="form1" method="post" action="">
  <p>
    <input type="textone" name="textfieldone" id="textfieldone">
  </p>
  <p> 
    <select name="selectone" onChange="UpdatePreviousField()">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </p>
  <p>&nbsp; </p>
  <p>&nbsp; </p>
  <p>&nbsp; </p>
  <p>&nbsp; </p>
  <p> 
    <input type="texttwo" name="textfieldtwo" id="textfieldtwo">
  </p>
  <p> 
    <select name="selecttwo" onChange="UpdatePreviousField()">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </p>
  <p>&nbsp; </p>
</form>

<script type="text/javascript">
function showstuff(element){
        if(document.getElementById(element).style.display = 'block')
                  {
                        document.getElementById(have).style.visibility="block";
                        document.getElementById(look).style.visibility="none";
                  }
        else if(document.getElementById(element).style.visibility = 'block')
                  {
                        document.getElementById(look).style.visibility="block";
                        document.getElementById(have).style.visibility="none";
                  }
}
</script>

<select name="type" onchange="showstuff(this.value);">
          <option value="look">Look</option>
          <option value="have">Have</option>
</select>
<div id="have" style="display:block;">Have</div>
<div id="look" style="display:none;">Look</div>

<script type="text/javascript">
function showUser(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>

var correctAnswers = new Array();

correctAnswers[1] = "Extensible Hypertext Markup Language";

correctAnswers[2] = "<p></p>";

correctAnswers[3] = "<br />";



function checkAnswers(){

    var score = 0;

    for (i=1; i<4; i++){

        correctAnswers = getSelectValue("quiz","q" + i);

        if (correctAnswers == correctAnswers[i]){

            score++;

        }

    }

function dynamicSelect(id1, id2) {
	// Browser and feature tests to see if there is enough W3C DOM support
	var agt = navigator.userAgent.toLowerCase();
	var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
	var is_mac = (agt.indexOf("mac") != -1);
	if (!(is_ie && is_mac) && document.getElementById && document.getElementsByTagName) {
		// Obtain references to both select boxes
		var sel1 = document.getElementById(id1);
		var sel2 = document.getElementById(id2);
		// Clone the dynamic select box
		var clone = sel2.cloneNode(true);
		// Obtain references to all cloned options 
		var clonedOptions = clone.getElementsByTagName("option");
		// Onload init: call a generic function to display the related options in the dynamic select box
		refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
		// Onchange of the main select box: call a generic function to display the related options in the dynamic select box
		sel1.onchange = function() {
			refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
		};
	}
}
function refreshDynamicSelectOptions(sel1, sel2, clonedOptions) {
	// Delete all options of the dynamic select box
	while (sel2.options.length) {
		sel2.remove(0);
	}
	// Create regular expression objects for "select" and the value of the selected option of the main select box as class names
	var pattern1 = /( |^)(select)( |$)/;
	var pattern2 = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + ")( |$)");
	// Iterate through all cloned options
	for (var i = 0; i < clonedOptions.length; i++) {
		// If the classname of a cloned option either equals "select" or equals the value of the selected option of the main select box
		if (clonedOptions[i].className.match(pattern1) || clonedOptions[i].className.match(pattern2)) {
			// Clone the option from the hidden option pool and append it to the dynamic select box
			sel2.appendChild(clonedOptions[i].cloneNode(true));
		}
	}
}

<!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" xml:lang="en" lang="en">
<head>
  <title></title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">	
var ajax = new Array();

function getCityList(sel)
{
	var countryCode = sel.options[sel.selectedIndex].value;
	document.getElementById('dhtmlgoodies_city').options.length = 0;	// Empty city select box
	if(countryCode.length>0){
		var index = ajax.length;
		ajax[index] = new sack();
		
		ajax[index].requestFile = 'getCities.php?countryCode='+countryCode;	// Specifying which file to get
		ajax[index].onCompletion = function(){ createCities(index) };	// Specify function that will be executed after file has been found
		ajax[index].runAJAX();		// Execute AJAX function
	}
}

function createCities(index)
{
	var obj = document.getElementById('dhtmlgoodies_city');
	eval(ajax[index].response);	// Executing the response from Ajax as Javascript code	
}


function getSubCategoryList(sel)
{
	var category = sel.options[sel.selectedIndex].value;
	document.getElementById('dhtmlgoodies_subcategory').options.length = 0;	// Empty city select box
	if(category.length>0){
		var index = ajax.length;
		ajax[index] = new sack();
		
		ajax[index].requestFile = 'getSubCategories.php?category='+category;	// Specifying which file to get
		ajax[index].onCompletion = function(){ createSubCategories(index) };	// Specify function that will be executed after file has been found
		ajax[index].runAJAX();		// Execute AJAX function
	}
}
function createSubCategories(index)
{
	var obj = document.getElementById('dhtmlgoodies_subcategory');
	eval(ajax[index].response);	// Executing the response from Ajax as Javascript code	
}		
</script>
</head>
<body>
<form action="" method="post">
<table>
	<tr>
		<td>Country: </td>
		<td><select id="dhtmlgoodies_country" name="dhtmlgoodies_country" onchange="getCityList(this)">
			<option value="">Select a country</option>
			<option value="dk">Denmark</option>
			<option value="no">Norway</option>
			<option value="us">US</option>
		</select>
		</td>
	</tr>
	<tr>
		<td>City: </td>
		<td><select id="dhtmlgoodies_city" name="dhtmlgoodies_city">
		
		</select>
		</td>
	</tr>
</table>
</form>

</body>
</html>

<?php

if(isset($_GET['countryCode'])){
  
  switch($_GET['countryCode']){
    
    case "no":
      echo "obj.options[obj.options.length] = new Option('Bergen','1');\n";
      echo "obj.options[obj.options.length] = new Option('Haugesund','2');\n";
      echo "obj.options[obj.options.length] = new Option('Oslo','3');\n";
      echo "obj.options[obj.options.length] = new Option('Stavanger','4');\n";
      
      break;
    case "dk":
      
      echo "obj.options[obj.options.length] = new Option('Aalborg','11');\n";
      echo "obj.options[obj.options.length] = new Option('Copenhagen','12');\n";
      echo "obj.options[obj.options.length] = new Option('Odense','13');\n";
      
      break;
    case "us":
      
      echo "obj.options[obj.options.length] = new Option('Atlanta','21');\n";
      echo "obj.options[obj.options.length] = new Option('Chicago','22');\n";
      echo "obj.options[obj.options.length] = new Option('Denver','23');\n";
      echo "obj.options[obj.options.length] = new Option('Los Angeles','24');\n";
      echo "obj.options[obj.options.length] = new Option('New York','25');\n";
      echo "obj.options[obj.options.length] = new Option('San Fransisco','26');\n";
      echo "obj.options[obj.options.length] = new Option('Seattle','27');\n";
      
      break;
  }  
}

?>

<select name="select_Col1_Row1">
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="red>Red</option>
</select>
<select name="select_Col1_Row2">
<option value="blue" selected="selected">Blue</option>
<option value="green">Green</option>
<option value="red>Red</option>
</select>
<input type="text" name="RedSum">
<input type="text" name="BlueSum">
<input type="text" name="GreenSum">
</select>

<script type="text/javascript">
function getElements()
  {
  var table = document.getElementById("x");   
  var x = table.getElementsByTagName("option");
  for (var i = 0; i < x.length; i++) {   
    var status = x[i].getAttribute("selected");
	alert(status);
    if (status == "selected") {
      var statushcap = x[i].getAttribute("id");
      var statusvalue =x[i].getAttribute("value");
      if (statusvalue == "blue") {
        alert(statusvalue);
      }
    }

  }
  
  alert(x.length);
  }
</script>

<select name="LocO">
<option value=""></option>
<option value="O">Outside</option>
<option value="I">Inside</option>
</select>

<select name="LocA">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
<option value="J">J</option>
<option value="K">K</option>
</select>

<select name="Loc1">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

On page load code(if (!isPostBack)):
                txtFICODate.Attributes.Add("onblur", "isValidDate(this, 'MM/DD/YY');");
                txtDOBB.Attributes.Add("onblur", "isValidDate(this, 'MM/DD/YYYY');");
                txtDOBC.Attributes.Add("onblur", "isValidDate(this, 'MM/DD/YYYY');");

<asp:TextBox ID="txtDOBB" runat="server" Font-Bold="true" 
					Text="" Columns="10" TextMode="SingleLine" AutoPostBack="false" 
					onblur="return isValidDate(this, 'MM/DD/YYYY');"
					Width="120px"></asp:TextBox>

<asp:TextBox ID="txtDOBC" runat="server" Font-Bold="true" 
					Text="" Columns="10" TextMode="SingleLine" AutoPostBack="false" 
					onblur="return isValidDate(this, 'MM/DD/YYYY');"
					Width="120px"></asp:TextBox>                   
                    
                    
 <asp:TextBox ID="txtFICODate" runat="server" Font-Bold="true" AutoPostBack="false"					
					onblur="return isValidDate(this, 'MM/DD/YY');"
					Text="" Columns="6" TextMode="SingleLine"					 
					Width="120px" ></asp:TextBox>

                    
function isValidDate(ctrl, fmt)
    {
        // retrieved 9/11/09
        // from  http://www.dotnetspider.com/resources/20790-Validatin-date-MM-DD-YY-Format-using-javascript.aspx

        // modified to pass in format (mm/dd/yy, mm/dd/yyyy so msg is appropriate if incorrect
        // also removed - option for dates, i.e. 09-11

        var dateStr = ctrl.value;
        var datePat;

        //var datePat = /^(\d{1,2})(\/)(\d{1,2})\2(\d{2}|\d{4})$/;
        if (fmt.toString().toUpperCase() == 'MM/DD/YY')
        {
            datePat = /^(\d{2})(\/)(\d{2})\2(\d{2})$/;
        }

        if (fmt.toString().toUpperCase() == 'MM/DD/YYYY')
        {
            datePat = /^(\d{2})(\/)(\d{2})\2(\d{4})$/; 
        }
       
        
        var matchArray = dateStr.match(datePat); // is the format ok?

        if (matchArray == null)
        {
            if (fmt.toString().toUpperCase() == 'MM/DD/YY')
            {
                alert("Invalid date format.\n"
               + "Please enter the date in the MM/DD/YY format (example: 1/15/08).")
                ctrl.focus();               
                ctrl.select();                
                return false;
            }
            if (fmt.toString().toUpperCase() == 'MM/DD/YYYY')
            {
                alert("Invalid date format.\n"
                  + "Please enter the date in the MM/DD/YYYY format (example: 1/15/2008).")                
                ctrl.focus();
                ctrl.select();
                return false;

            }
        }
        
        // match breaks date down
        month = matchArray[1]; // parse date into variables        
        day = matchArray[3];
        year = matchArray[4];
        if (month < 1 || month > 12)
        {
            // check month range            
            alert("Month must be between 1 and 12.");
            return false;
        }

        if (day < 1 || day > 31)
        {
            alert("Day must be between 1 and 31.");
            return false;
        }

        if ((month == 4 || month == 6 || month == 9 || month == 11) && day == 31)
        {
            alert("Month " + month + " doesn't have 31 days!")
            return false
        }

        if (month == 2)
        {
            // check for february 29th            
            var isleap = (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0));
            if (day > 29 || (day == 29 && !isleap))
            {
                alert("February " + year + " doesn't have " + day + " days!");
                return false;
            }
        }
        return true; // date is valid    
    }
 // ****************************************************                       

    function ValidateFICODate(obj)
    {        
        var dateFormat = 'MM/DD/YY';
        var isSuccess = false;
        var objID = obj.id;
        var hidFICODate = document.getElementById('hidFICODate').value;

        if (obj.value == '')
        {
           alert('Please enter FICO date.' + '\n'
                + 'Required field.');
           //document.frmCustInfo + '.' + obj.id + '.' + focus();
           obj.focus();
           obj.select();
           return false;
        }

        // now check if valid date
        isSuccess = isValidDate(obj, dateFormat);

        if (!isSuccess)
        {
            obj.focus();
            obj.select();
            return false;
        }

        if (isSuccess)
        {
            if (obj.value != hidFICODate)
            {
                document.getElementById('hidFICODate_Updated').value = 'UPDATED';
                document.getElementById('hidFICODate').value = obj.value;
            }

        }

        return isSuccess;
    }

<form name="myFormGood" action="" onsubmit="return false;">
Good Form with no hyphen in radio button name<br>
<input name="radio1" type="radio" value="4" checked> First Option<br>
<input name="radio1" type="radio" value="5"> Second Option<br><br>
Change the text to select the Second Option<br>
<input type="text" name="text1" onChange="document.myFormGood.radio1[1].checked = 'true';" size="10" value=" "><br><br>
<input type="button" name="submit" value="It Works!">
</form>

<form name="myFormBad" action="" onsubmit="return false;">
Bad Form with hyphen in radio button name breaks JavaScript<br> 
<input name="radio-1" type="radio" value="4" checked> First Option<br>
<input name="radio-1" type="radio" value="5"> Second Option<br><br>
Change the text to select the Second Option. Nothing Happens.<br>
<input type="text" name="text1" onChange="document.myFormBad.radio-1[1].checked = 'true';" size="10" value=" "><br><br>
<input type="button" name="submit" value="It Doesn't Work!">
</form>

<script language="javascript" type="text/javascript">
    function checkQuantity(frm) {
        var succesful = false;
        var numQuantity;
        numQuantity = parseInt(frm.Quantity.value);
        var numTotalPrice;

        if (numQuantity != 0) {
            numTotalPrice = numQuantity * 4;
            frm.TotalPrice.value = numTotalPrice; //new String(numTotalPrice);
            successful = true;
        }
        else {
            alert("Sorry must order more than 0");
            successful = false;
        }
        return succesful;
    }
            

</script>

<form action=""  onsubmit="return checkQuantity(this)" style="width: 193px">
                   
                    <table cellpadding="4" style="width:111%">
                        <tr>
                            <td class="style1">
                                Quanity:</td>
                            <td class="formInputCell">
                                <input name="Quantity" type="text" style="width: 55px" /></td>
                        </tr>
                        <tr>
                            <td class="style1">
                                Total Price $
                            </td>
                            <td class="formInputCell">
                                <input name="TotalPrice" type="text" style="width: 55px" /></td>
                        </tr>
                        <tr>
                        <td class="style2"></td>
                        <td><input id="Submit1" type="submit" 
                        value="Buy Now" class="buttonstyle" /></td>
                        </tr>  
                    </table>    
                    </form>