Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    unit converter with two dropdown boxes

    I am trying to make a unit converter with two dropdown boxes, two textfields and a button. I want to enter a number into the first textfield, select a unit option, then select another appropriate unit option based on the first selection, press the button and get the result in the second textfield. What would be the best approach for this. So far I have:

    <html>
    <head>

    <script type="text/javascript">

    function convertUnit ()
    {
    // convert pound to kilogram
    document.unitForm.toField.value = document.unitForm.fromField.value / 2.2;
    // convert kilogram to pound
    document.unitForm.toField.value = document.unitForm.fromField.value * 2.2;
    // convert inch to centimeter
    document.unitForm.toField.value = document.unitForm.fromField.value / 2.54;
    // convert centimeter to inch
    document.unitForm.toField.value = document.unitForm.fromField.value * 2.54;
    }

    </script>
    </head>

    <body style="background-color:lightgray">

    <form action="" name="unitForm">

    <input type="text" name="fromField" onfocus="this.form.fromField.value=''; style.background='lightyellow';" onblur="style.background='white';" />

    <select name="fromList" >
    <option value="" selected="selected">Unit</option>
    <option id="fromPound" value="2.2">lb</option>
    <option id="fromKilogram" value="1.0">kg</option>
    <option id="fromInch" value="1.0">in</option>
    <option id="fromCentimeter" value="2.54">cm</option>
    </select>

    <input type="button" value="Convert" onclick="convertUnit()" />

    <input type="text" name="toField" readonly="readonly" />

    <select name="toList">
    <option value="" selected="selected">Unit</option>
    <option name="toKilogram" id="toKilogram" value="1.0">kg</option>
    <option name="toPound" id="toPound" value="2.2">lb</option>
    <option name="toCentimeter" id="toCentimeter" value="2.54">cm</option>
    <option name="toInch" id="toInch" value="1.0">in</option>
    </select>

    <input type="reset" value="Reset" />

    </form>

    </body>
    </html>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,133
    Thanks
    38
    Thanked 504 Times in 498 Posts

    Lightbulb Something like this? ...

    I have not checked your math, but this should give you a start ...
    Code:
    <html>
    <head>
    <script type="text/javascript">
    // From: http://www.codingforums.com/showthread.php?t=198488
    
    function convertUnit () {
      var fromList = document.unitForm.fromList;
      var fromIndex = fromList.selectedIndex;
      
      var toList = document.unitForm.toList;
      var toIndex = toList.selectedIndex;
      
      var indx = fromIndex.toString()+toIndex.toString();
      switch (indx) {
        case '11' :	// convert pound to kilogram
          document.unitForm.toField.value = Number(document.unitForm.fromField.value) / 2.2; break;
        case '22' : // convert kilogram to pound
          document.unitForm.toField.value = Number(document.unitForm.fromField.value) * 2.2; break;
          
        case '33' : // convert inch to centimeter
          document.unitForm.toField.value = Number(document.unitForm.fromField.value) / 2.54; break;
        case '44' : // convert centimeter to inch
          document.unitForm.toField.value = Number(document.unitForm.fromField.value) * 2.54; break;
          
        case '12': case '21':  
        case '23': case '43' : // no change to units
          document.unitForm.toField.value = document.unitForm.fromField.value; break;
          
        default   : alert('Invalid conversion'); break;
      }
    }
    </script>
    </head>
    
    <body style="background-color:lightgray">
    
    <form action="" name="unitForm" onsubmit="return false">
    
    <input type="text" name="fromField" onfocus="this.form.fromField.value=''; style.background='lightyellow';" onblur="style.background='white';" />
    
    <select name="fromList" >
     <option value="" selected="selected">Unit</option>
     <option id="fromPound" value="2.2">lb</option>
     <option id="fromKilogram" value="1.0">kg</option>
     <option id="fromInch" value="1.0">in</option>
     <option id="fromCentimeter" value="2.54">cm</option>
    </select>
    
    <input type="button" value="Convert" onclick="convertUnit()" />
    
    <input type="text" name="toField" readonly="readonly" />
    
    <select name="toList">
     <option value="" selected="selected">Unit</option>
     <option name="toKilogram" id="toKilogram" value="1.0">kg</option>
     <option name="toPound" id="toPound" value="2.2">lb</option>
     <option name="toCentimeter" id="toCentimeter" value="2.54">cm</option>
     <option name="toInch" id="toInch" value="1.0">in</option>
    </select>
    
    <input type="reset" value="Reset" />
    </form>
    </body>
    </html>
    Also, you should enclose your script between [ code] and [ /code] tags (without the spaces)
    to make it standout for forum members to see.

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you jmrker for your quick response. It worked after I made some small correction. I changed case '23' to '34' and the math of convert inch to centimeter from / 2.54 to * 2.54, plus convert centimeter to inch from * 2.54 to / 2.54.

    I have another question though. Could you analyze to see why my code doesn't work, assuming I added value to fromList and toList options. My code is:

    Code:
    function convertUnit()
           {
             var fromIndex = document.unitForm.fromList.selectedIndex;
             var toIndex = document.unitForm.toList.selectedIndex;
             
             if (document.unitForm.fromList.options[fromIndex].value = "fromPound" && document.unitform.toList.options[toIndex].value = "toKilogram") 
                {document.unitForm.toField.value = document.unitForm.fromField.value / 2.2;}
             else if (document.unitForm.fromList.options[fromIndex].value = "fromKilogram" && document.unitform.toList.options[toIndex].value = "toPound")
                {document.unitForm.toField.value = document.unitForm.fromField.value * 2.2;}
             else if (document.unitForm.fromList.options[fromIndex].value = "fromInch" && document.unitform.toList.options[toIndex].value = "toCentimeter")
                {document.unitForm.toField.value = document.unitForm.fromField.value * 2.54;}
             else if (document.unitForm.fromList.options[fromIndex].value = "fromCentimeter" && document.unitform.toList.options[toIndex].value = "toInch")
                {document.unitForm.toField.value = document.unitForm.fromField.value / 2.54;}
             else if (document.unitForm.fromList.options[fromIndex].value = "fromPound" && document.unitform.toList.options[toIndex].value = "toPound")
                {document.unitForm.toField.value = document.unitForm.fromField.value;}
             else if (document.unitForm.fromList.options[fromIndex].value = "fromKilogram" && document.unitform.toList.options[toIndex].value = "toKilogram")
                {document.unitForm.toField.value = document.unitForm.fromField.value;}
             else if (document.unitForm.fromList.options[fromIndex].value = "fromInch" && document.unitform.toList.options[toIndex].value = "toInch")
                {document.unitForm.toField.value = document.unitForm.fromField.value;}
             else if (document.unitForm.fromList.options[fromIndex].value = "fromCentimeter" && document.unitform.toList.options[toIndex].value = "toCentimeter")
                {document.unitForm.toField.value = document.unitForm.fromField.value;}
             else
                {document.unitForm.toField.value = "ERROR";}
           }
    Could you make this work by tweaking it somehow. Please help. Thanks in advance.

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,133
    Thanks
    38
    Thanked 504 Times in 498 Posts

    Question Why???

    Why do you want your version to work with a bunch of complicated if..then..else statements
    when I have provided a more simplistic version that you say works for you?

  • #5
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The answer to your question, in short, is I'm learning. And thus, I could only do what is native to me. I did not get your method of toString, it seems complicated to me. I would like to work with something that I'm more comfortable with. Keeping track of the index number could get confusing, so I prefer to work with value. I also wanted to add more options the list. If I could master this one area I could use it to apply to other areas. I hope that I have not confused you.

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,133
    Thanks
    38
    Thanked 504 Times in 498 Posts

    Lightbulb

    Quote Originally Posted by k9lulu View Post
    The answer to your question, in short, is I'm learning. And thus, I could only do what is native to me. I did not get your method of toString, it seems complicated to me. I would like to work with something that I'm more comfortable with. Keeping track of the index number could get confusing, so I prefer to work with value. I also wanted to add more options the list. If I could master this one area I could use it to apply to other areas. I hope that I have not confused you.
    If you only code what is native to you and don't learn new functions
    you will be stuck on inefficient and unusable code as you currently produce.

    If you want to work with your code, here is the start of some fixes that need to be made:
    Code:
             if (document.unitForm.fromList.options[fromIndex].value = "fromPound" && document.unitform.toList.options[toIndex].value = "toKilogram") 
                {document.unitForm.toField.value = document.unitForm.fromField.value / 2.2;}
             else if (document.unitForm.fromList.options[fromIndex].value = "fromKilogram" && document.unitform.toList.options[toIndex].value = "toPound")
                {document.unitForm.toField.value = document.unitForm.fromField.value * 2.2;}
    1. You cannot compare in an if statement with an '=' character. '==' is required here.

    2. You are trying to compare a value (number the user enters in this case)
    with a string value ("fromPound" in your code). Unless the user enters
    "fromPound" exactly even if you change to the "==" comparison,
    you will never follow the true branch of your logic.

    3. Using if..then..else if..then..else if..then..else ......
    will ultimately lead to a code breakdown as it very easy to get lost in the logic.
    I would also recommend using '{ }' brackets around the 'then' and 'else' parts of the 'if' statement

    I still recommend you investigate the "switch" command.
    The purpose of the .toString() is to convert the index values (numbers) to a string
    which is concatenated to form another string (with the second index value)
    which can be recognized by the "case 'xx':" commands within the switch block.

    Google the term "javascript tostring()" and look at the tutorials to see how it works
    or locate a "javascript tutorial" as a alternative.
    Another suggestion is to look in the index of any good javascript book to learn how this function is used.
    To not use it because you don't understand it is not a valid argument.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •