Measurement Units Conversion Calculater

[saad749]

I am trying to make a Measurements Units Conversion Calculater on Dreamweaver with help of Javascript.
THis is my first ever javascript application and need to complete it in next 6 hours. :((

I want to have a drop box containing Length, Area, Temp etc. on top. When a user selects any of this entities the dropdown lists below will fill with the respective units, ie. milimeters and meters for length, celsius and kelvin for temperature etc.

I have been able to acheive this goal in Firefox, but a big problem occurs that is when the list fills with the respective units, I am not able to select units except the initially selected first unit. Secondly this isn't working in IE 8(I know IE sucks big time but I want to make it workable on it too).

Any Help in this regard would be greatly appreciated. :)

The javascript is:

function setOptions(chosen) {
var selbox = document.form1.Iunit;
 
selbox.options.length = 0;
if (chosen == " ") {
  selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
 
}
if (chosen == "1") {
  selbox.options[selbox.options.length] = new Option('Milimeters','mm');
  selbox.options[selbox.options.length] = new Option('Meters','m');
  selbox.options[selbox.options.length] = new Option('KiloMeters','Km');
  selbox.options[selbox.options.length] = new Option('Feet','f');
  selbox.options[selbox.options.length] = new Option('Yards','y');
  selbox.options[selbox.options.length] = new Option('Miles','mi');
}
if (chosen == "2") {
  selbox.options[selbox.options.length] = new Option('Square Milimeters','mm2');
  selbox.options[selbox.options.length] = new Option('Square Meters','m2');
  selbox.options[selbox.options.length] = new Option('Square KiloMeters','km2');
  selbox.options[selbox.options.length] = new Option('Square Inches','in2');
  selbox.options[selbox.options.length] = new Option('Square Feet','f2');
  selbox.options[selbox.options.length] = new Option('Square Yard','y2');
  selbox.options[selbox.options.length] = new Option('Acre','a');
  selbox.options[selbox.options.length] = new Option('Hectare','h');
  selbox.options[selbox.options.length] = new Option('Square Miles','mi2');
}
if (chosen == "3") {
  selbox.options[selbox.options.length] = new Option('Fluid Ounces','fo');
  selbox.options[selbox.options.length] = new Option('MiliLitres','ml');
  selbox.options[selbox.options.length] = new Option('Litres','l');
  selbox.options[selbox.options.length] = new Option('Gallons','g');
  selbox.options[selbox.options.length] = new Option('Cubic Meters','cm');
  selbox.options[selbox.options.length] = new Option('Cubic Feet','cf');
  selbox.options[selbox.options.length] = new Option('Cubic yards','cy');
}
if (chosen == "4") {
  selbox.options[selbox.options.length] = new Option('grams','g');
  selbox.options[selbox.options.length] = new Option('Kilograms','kg');
  selbox.options[selbox.options.length] = new Option('Ounces','o');
  selbox.options[selbox.options.length] = new Option('Pounds','p');
  selbox.options[selbox.options.length] = new Option('Short Tons','st');
  selbox.options[selbox.options.length] = new Option('Metric ton - Mega ton','mt');
}
if (chosen == "5") {
  selbox.options[selbox.options.length] = new Option('Fahrenheit','df');
  selbox.options[selbox.options.length] = new Option('Celsius','dc');
  selbox.options[selbox.options.length] = new Option('Kelvin','dk');
}

[saad749]

The Form Code is as follows:

<form id="form1" name="form1" method="post" action="" onchange="setOptions(document.form1.entity.options[document.form1.entity.selectedIndex].value);">
      <p>Which entity will you like to convert:	  
        <select name="entity" id="entity">
          <option value="1" selected="selected">Length</option>
          <option value="2">Area</option>
          <option value="3">Volume</option>
          <option value="4">Mass</option>
          <option value="5">Temprature</option>
        </select>
      </p>
      <p>
        <input name="Iamount" type="text" id="Iamount" value="1" size="15" />
        <select name="Iunit" id="Iunit">
        </select>

[@developer]

Try this..check whether it works for you..

<script>
function setOptions(chosen) 
{
  var selbox = document.form1.Iunit;
  selbox.options.length = 0;
  
  if (chosen == " ") {
    selbox.options[selbox.options.length] = new  Option('Please select one of the options above first',' ');
 
}

if (chosen == "1") {
  selbox.options[selbox.options.length] = new Option('Milimeters','mm');
  selbox.options[selbox.options.length] = new Option('Meters','m');
  selbox.options[selbox.options.length] = new Option('KiloMeters','Km');
  selbox.options[selbox.options.length] = new Option('Feet','f');
  selbox.options[selbox.options.length] = new Option('Yards','y');
  selbox.options[selbox.options.length] = new Option('Miles','mi');
}
if (chosen == "2") {
  selbox.options[selbox.options.length] = new Option('Square Milimeters','mm2');
  selbox.options[selbox.options.length] = new Option('Square Meters','m2');
  selbox.options[selbox.options.length] = new Option('Square KiloMeters','km2');
  selbox.options[selbox.options.length] = new Option('Square Inches','in2');
  selbox.options[selbox.options.length] = new Option('Square Feet','f2');
  selbox.options[selbox.options.length] = new Option('Square Yard','y2');
  selbox.options[selbox.options.length] = new Option('Acre','a');
  selbox.options[selbox.options.length] = new Option('Hectare','h');
  selbox.options[selbox.options.length] = new Option('Square Miles','mi2');
}
if (chosen == "3") {
  selbox.options[selbox.options.length] = new Option('Fluid Ounces','fo');
  selbox.options[selbox.options.length] = new Option('MiliLitres','ml');
  selbox.options[selbox.options.length] = new Option('Litres','l');
  selbox.options[selbox.options.length] = new Option('Gallons','g');
  selbox.options[selbox.options.length] = new Option('Cubic Meters','cm');
  selbox.options[selbox.options.length] = new Option('Cubic Feet','cf');
  selbox.options[selbox.options.length] = new Option('Cubic yards','cy');
}
if (chosen == "4") {
  selbox.options[selbox.options.length] = new Option('grams','g');
  selbox.options[selbox.options.length] = new Option('Kilograms','kg');
  selbox.options[selbox.options.length] = new Option('Ounces','o');
  selbox.options[selbox.options.length] = new Option('Pounds','p');
  selbox.options[selbox.options.length] = new Option('Short Tons','st');
  selbox.options[selbox.options.length] = new Option('Metric ton - Mega ton','mt');
}
if (chosen == "5") {
  selbox.options[selbox.options.length] = new Option('Fahrenheit','df');
  selbox.options[selbox.options.length] = new Option('Celsius','dc');
  selbox.options[selbox.options.length] = new Option('Kelvin','dk');
}

}
</script>

<body>
<form id="form1" name="form1" method="post" action="">
      <p>Which entity will you like to convert:	  
        <select name="entity" id="entity" onchange="setOptions(document.form1.entity.options[document.form1.entity.selectedIndex].value);">
          <option value="1" selected="selected">Length</option>
          <option value="2">Area</option>
          <option value="3">Volume</option>
          <option value="4">Mass</option>
          <option value="5">Temprature</option>
        </select>
      </p>
      <p>
        <input name="Iamount" type="text" id="Iamount" value="1" size="15" />
        <select name="Iunit" id="Iunit">
        </select>
</form>
</body>

[saad749]

Thanks a lot. It does selects the desired option in firefox. The onchange method of dropdown was needed not of form.

The Other Problem remains, It isn't working in IE 8. Any insight on why and how it could be solved?

[@developer]

Think this fixes the IE issue..please check..

<script>
function setOptions(chosen) 
{
  var selbox = document.form1.Iunit;
  selbox.options.length = 0;
  
  if (chosen == " ") {
    selbox.add(new  Option('Please select one of the options above first',' '));
 
}

/* New Option forces browsers to use an older DOM model which fails in IE.
   Use add method.Also it takes 2 parameters, so will have to use null for browsers other than IE since IE won't take null. */

if (chosen == "1") {
 try{
   selbox.add(new Option('Milimeters','mm'));
   selbox.add(new Option('Meters','m'));
   selbox.add(new Option('KiloMeters','Km'));
   selbox.add(new Option('Feet','f'));
   selbox.add(new Option('Yards','y'));
   selbox.add(new Option('Miles','mi'));
 }
 catch(err)
  {
    selbox.add(new Option('Milimeters','mm'),null);
    selbox.add(new Option('Meters','m'),null);
    selbox.add(new Option('KiloMeters','Km'),null);
    selbox.add(new Option('Feet','f'),null);
    selbox.add(new Option('Yards','y'),null);
    selbox.add(new Option('Miles','mi'),null);
  }
}
if (chosen == "2") {
 try{
   selbox.add(new Option('Square Milimeters','mm2'));
   selbox.add(new Option('Square Meters','m2'));
   selbox.add(new Option('Square KiloMeters','km2'));
   selbox.add(new Option('Square Inches','in2'));
   selbox.add(new Option('Square Feet','f2'));
   selbox.add(new Option('Square Yard','y2'));
   selbox.add(new Option('Acre','a'));
   selbox.add(new Option('Hectare','h'));
   selbox.add(new Option('Square Miles','mi2'));
  }
 catch(err)
  {
    selbox.add(new Option('Square Milimeters','mm2'),null);
    selbox.add(new Option('Square Meters','m2'),null);
    selbox.add(new Option('Square KiloMeters','km2'),null);
    selbox.add(new Option('Square Inches','in2'),null);
    selbox.add(new Option('Square Feet','f2'),null);
    selbox.add(new Option('Square Yard','y2'),null);
    selbox.add(new Option('Acre','a'),null);
    selbox.add(new Option('Hectare','h'),null);
    selbox.add(new Option('Square Miles','mi2'),null);
  }
}
if (chosen == "3") {
 try{
   selbox.add(new Option('Fluid Ounces','fo'));
   selbox.add(new Option('MiliLitres','ml'));
   selbox.add(new Option('Litres','l'));
   selbox.add(new Option('Gallons','g'));
   selbox.add(new Option('Cubic Meters','cm'));
   selbox.add(new Option('Cubic Feet','cf'));
   selbox.add(new Option('Cubic yards','cy'));
  }
 catch(err)
 {
   selbox.add(new Option('Fluid Ounces','fo'),null);
   selbox.add(new Option('MiliLitres','ml'),null);
   selbox.add(new Option('Litres','l'),null);
   selbox.add(new Option('Gallons','g'),null);
   selbox.add(new Option('Cubic Meters','cm'),null);
   selbox.add(new Option('Cubic Feet','cf'),null);
   selbox.add(new Option('Cubic yards','cy'),null);
  }
 }
if (chosen == "4") {
 try{
   selbox.add(new Option('grams','g'));
   selbox.add(new Option('Kilograms','kg'));
   selbox.add(new Option('Ounces','o'));
   selbox.add(new Option('Pounds','p'));
   selbox.add(new Option('Short Tons','st'));
   selbox.add(new Option('Metric ton - Mega ton','mt'));
  }
 catch(err)
 {
   selbox.add(new Option('grams','g'),null);
   selbox.add(new Option('Kilograms','kg'),null);
   selbox.add(new Option('Ounces','o'),null);
   selbox.add(new Option('Pounds','p'),null);
   selbox.add(new Option('Short Tons','st'),null);
   selbox.add(new Option('Metric ton - Mega ton','mt'),null);
 }
}
if (chosen == "5") {
 try{
  selbox.add(new Option('Fahrenheit','df'));
  selbox.add(new Option('Celsius','dc'));
  selbox.add(new Option('Kelvin','dk'));
  }
 catch(err)
  {
    selbox.add(new Option('Fahrenheit','df'),null);
    selbox.add(new Option('Celsius','dc'),null);
    selbox.add(new Option('Kelvin','dk'),null);
  }
}

}
</script>

<body>
<form id="form1" name="form1" method="post" action="">
      <p>Which entity will you like to convert:	  
        <select name="entity" id="entity" onchange="setOptions(document.form1.entity.options[document.form1.entity.selectedIndex].value);">
          <option value="1" selected="selected">Length</option>
          <option value="2">Area</option>
          <option value="3">Volume</option>
          <option value="4">Mass</option>
          <option value="5">Temprature</option>
        </select>
      </p>
      <p>
        <input name="Iamount" type="text" id="Iamount" value="1" size="15" />
        <select name="Iunit" id="Iunit">
        </select>
</form>
</body>

[saad749]

Feeling Quite Embarrassed :(, I don't use IE much, I had active X disabled on Internet the reason I wasn't able to select it on IE 8.
Thanks a ton.
Question Solved. :)

[@developer]

:)