Results 1 to 3 of 3

Thread: Validation of Radio button

  1. #1
    Join Date
    Dec 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Validation of Radio button

    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.
    Last edited by keyboard; 12-14-2012 at 10:33 AM. Reason: Format: Html Tags [html][/html]

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,776
    Thanks
    2
    Thanked 411 Times in 406 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    happyhappiness (12-15-2012)

  4. #3
    Join Date
    Dec 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.
    Last edited by keyboard; 12-15-2012 at 05:41 AM. Reason: Format: Html Tags [html][/html]

Similar Threads

  1. Radio button and other field form validation
    By mmace in forum JavaScript
    Replies: 1
    Last Post: 10-19-2012, 04:43 PM
  2. Radio Button Validation
    By MacRat101 in forum JavaScript
    Replies: 0
    Last Post: 02-09-2011, 10:14 PM
  3. Checkform radio group validation
    By marynorn in forum JavaScript
    Replies: 10
    Last Post: 04-29-2010, 06:21 AM
  4. Radio button validation
    By neo_philiac in forum JavaScript
    Replies: 3
    Last Post: 08-28-2008, 01:28 PM
  5. radio button form validation
    By gingerj in forum JavaScript
    Replies: 2
    Last Post: 04-06-2006, 06:01 PM

Bookmarks

Posting Permissions

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