Measurement Units Conversion Calculater

Question

saad749 0 Light Poster

13 Years Ago

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');
}

dropdown dynamic fill javascript

2 Contributors
6 Replies
221 Views
1 Day Discussion Span
Latest Post 13 Years Ago Latest Post by @developer

All 6 Replies

@developer 3 Junior Poster in Training

13 Years Ago

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>

@developer 3 Junior Poster in Training

13 Years Ago

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 commented: Very Helpful and To The Point Answers. +1

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

saad749 0 Light Poster · Answer 1 · 2010-11-26T18:46:35+00:00

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>

saad749 0 Light Poster · Answer 2 · 2010-11-27T22:48:13+00:00

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?

saad749 0 Light Poster · Answer 3 · 2010-11-28T00:14:03+00:00

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 3 Junior Poster in Training · Answer 4 · 2010-11-28T00:53:10+00:00

@developer 3 Junior Poster in Training

13 Years Ago

:)

Measurement Units Conversion Calculater

Recommended Answers Collapse Answers

All 6 Replies

Recommended Answers