Validation of Radio button [Archive]

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>
<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

<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>
<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.