need help with radio button Javascript

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • quashie
    New Member
    • Dec 2011
    • 3

    need help with radio button Javascript

    hello guys,
    I am new in here and I am beginner JavaScript. I need a solution with my JavaScript code that I created. I want the radio button ( Fahrenheit and Celsius) work. For example, if I choose Celsius, it will convert the value which I put in the text box. Also, the value will show in the last text box and the alert window will pop up to show the convert value. As you can see the pic that I attached. Thanks

    Code:
    <!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=iso-8859-1" />
    
    <title>Hendry Lee</title>
    
    <script type="text/javascript">
    
    function cursor_position() {
    	document.convert.fn.focus();
           } 
    
    function getradiovalue(radioObject) {
       var value = radioObject.value;
    	for (var i=0; i<radioObject.length; i++) {
    	   if (radioObject[i].checked)
    		{
    		  value = radioObject[i].value;
    		  break
    		}
    		else
    		{
    		value = ""
    		}
    	}
    	  return value;
    	}
    
    function validateform(vf) {
    	if (vf.fn.value =="") {
    	  alert(" Please Input the Value");
    	  vf.fn.focus();
    	  return false;
    	}
    
    
            if (getradiovalue(vf.fhr) == "") {
    	alert("Please Choose Between Fahrenheit and Celcius");
    	return false;
     }
    }
    
    
    		
    </script>
    </head>
    
    <body>
    <h1 align="center">Conversion of Fahrenheit to Celcius</h1>
    <hr color="red" size="3"/>
    
    
    <script type="text/javascript"> 
    
    var d = new Date()
    var month = d.getMonth() + 1
    var day = d.getDate()
    var year = d.getFullYear()
    document.write('<FONT COLOR="blue">');
    document.write("The date today is:" +month+"/"+day+"/"+year)
    document.write('</FONT>');
    </script>
    
    
    <form name="convert" method="get" enctype="application/x-www-form-urlencoded" onSubmit="return validateform(this);">
     
    <table>
     <tr>
       <td>Enter the Value of the Degree to Convert:</td>
       <td><input type="text" name="fn" size="15" maxlength="25"</td>
     </tr>
     
     <tr>
       <td>Choose the Conversion :</td>
       <td><input type="radio" name="fhr" value="tofah">Fahrenheit
           <input type="radio" name="fhr" value="tocel">Celcius
    </td>
    </tr>
    
    <tr>
       <td>The Conversion Result is :</td>
       <td><input type="text" name="result" size="15" maxlength="25"</td>
     </tr>
    
    <tr>
    <td>
    <td><input type="submit" value="Convert" >
          <input type="reset" value="Clear the Field">
      </td>
     </tr>
    </table>
    
    
    </form>
    </body>
    </html>
    Attached Files
  • Dormilich
    Recognized Expert Expert
    • Aug 2008
    • 8694

    #2
    there are three issues that could help you a lot:
    - why using a submit button? you don’t want to submit the form anyways.
    - if you check one radio button by default, then there will always be a conversion type selected
    - what is there to validate?

    for the check which radio button has been checked, there is no need to make an array. since they use a common name, only one button will ever be selected.

    essentially, you only need to check which radio button has been selected and then invoke the appropriate function.

    Code:
    // pseudo code
    function convert(data)
    {
        function toCelsius(x)
        {
            // conversion code
            return value;
        }
        function toFarenheit(x)
        {
            // conversion code
            return value;
        }
        return {
            celsius: toCelsius(data),
            farenheit: toFarenheit(data)
        };
    }
    var conv = convert(input.value);
    if (celsius) {
        output.value = conv.celsius;
    }
    else {
        output.value = conv.farenheit;
    }

    Comment

    • quashie
      New Member
      • Dec 2011
      • 3

      #3
      I still not get it right. I have been make some changes, but it still not working right. Thanks

      Comment

      • Dormilich
        Recognized Expert Expert
        • Aug 2008
        • 8694

        #4
        unfortunately my crystal orb is out for repairs.

        Comment

        Working...