Validation of Radio button

**happyhappiness** · 12-14-2012, 10:57 AM

Hi I'm new here, currently stucked with this problem. I can't seem to figure out how to make this code work.

Math operations using Radio buttons + submit button.

Here is my code:

HTML Code:

<html>
<head>
<script>
function math)

if(document.getElementById('add').checked)

{
var num1=document.form.v1.value;
var num2=document.form.v2.value;
var num3=Number(num1)+Number(num2);
alert("Sum of two numbers is: "+sum);
}

else if(document.getElementById('sub').checked)

{
var num1=document.form.v1.value;
var num2=document.form.v2.value;
var num3=Number(num1)-Number(num2);
alert("Result is: "+num3);
}

else if(document.getElementById('mul').checked)

{
var num1=document.form.v1.value;
var num2=document.form.v2.value;
var num3=Number(num1)*Number(num2);
alert("Result is: "+num3);
}

else if(document.getElementById('div').checked)

{
var num1=document.form.v1.value;
var num2=document.form.v2.value;
var num3=Number(num1)/Number(num2);
alert("Result is: "+num3);
}

</script>
</head>
<body>
<form name="form">
Value1:
<input type="number" name="v1">
Value2:
<input type="number" name="v2">
<br>
Addition
<input type="radio" value="add" name="addition" id="add">
<br>
Subtraction
<input type="radio" value="sub" name="subtraction" id="sub">
<br>
Multiplication
<input type="radio" value="mul" name="multiplication" id="mul">
<br>
Division
<input type="radio" value="div" name="division" id="div">
<br>
<input type="submit" value="Calculate" onclick="math();">
<input type="reset" value="Clear">
</html>

Any help is greatly appreciated thanks.

**vwphillips** · 12-14-2012, 01:55 PM

Code:

        <html>
        <head>
        <script>
        function math(frm){
         var num1=frm.v1.value.replace(/\D/g,'');

         var num2=frm.v2.value.replace(/\D/g,'');
         if (!num1||!num2){
          alert('please enter 2 numbers');
         }
         else {
          var rads=frm.rad,mess='Please Select One Radio';
          for (var z0=0;z0<rads.length;z0++){  // rads = an array of the radio buttons
           if (rads[z0].checked){
            if (z0==0){
             mess="Sum of two numbers is: "+(num1*1+num2*1);  // * converts to a number
            }
            if (z0==1){
             mess="Result is: "+(num1-num2);   // - converts to a number
            }
            if (z0==2){
             mess="Result is: "+(num1*num2);   // * converts to a number
            }
            if (z0==3){
             mess="Result is: "+(num1/num2);   // / converts to a number
            }
           }
          }
          alert(mess);
         }
        }
        </script>
        </head>
        <body>
        <form name="form">
        Value1:
        <input type="number" name="v1">
        Value2:
        <input type="number" name="v2">
        <br>
        Addition
        <input type="radio" value="add" name="rad" id="add">
        <br>
        Subtraction
        <input type="radio" value="sub" name="rad" id="sub">
        <br>
        Multiplication
        <input type="radio" value="mul" name="rad" id="mul">
        <br>
        Division
        <input type="radio" value="div" name="rad" id="div">
        <br>
        <input type="button" value="Calculate" onclick="math(this.form);">
        <input type="reset" value="Clear">
        </form>
        </html>

**happyhappiness** · 12-15-2012, 02:58 AM

Thank you for the reply but somehow after a couple of hours I managed to make my code work.

Here it is:

HTML Code:

<html>
<head>
<title>Math Operations</title>

<script>
function math()
{

if (document.form.add.checked == true)

{
var num1=document.form.v1.value;
var num2=document.form.v2.value;
var num3=Number(num1)+Number(num2);
alert("Sum of two numbers is: "+num3);
}

else if(document.form.sub.checked == true)

{
var num1=document.form.v1.value;
var num2=document.form.v2.value;
var num3=Number(num1)-Number(num2);
alert("Result is: "+num3);
}

else if(document.form.mul.checked == true)

{
var num1=document.form.v1.value;
var num2=document.form.v2.value;
var num3=Number(num1)*Number(num2);
alert("Result is: "+num3);
}

else if(document.form.div.checked == true)

{
var num1=document.form.v1.value;
var num2=document.form.v2.value;
var num3=Number(num1)/Number(num2);
alert("Result is: "+num3);
}

}
</script>
</head>
<body>

<form name="form">
Value1:
<input type="number" name="v1">
Value2:
<input type="number" name="v2">

<br>

<input type="radio" name="add">
Addition

<br>

<input type="radio" name="sub">
Subtraction

<br>

<input type="radio" name="mul">
Multiplication

<br>

<input type="radio" name="div">
Division

<br>

<input type="submit" value="Calculate" onclick="math();">
/
<input type="reset" value="Clear">
</form>
</html>

However, I will try and study your code to expand my knowledge about javascript thank you.