www.webdeveloper.com
Results 1 to 6 of 6

Thread: [RESOLVED] I need help in validating radio buttons and to do math operations in a form...

  1. #1
    Join Date
    Oct 2007
    Posts
    14

    resolved [RESOLVED] I need help in validating radio buttons and to do math operations in a form...

    I am trying to write a script where I am going to do some math operations in the form of "add," "subtract," "multiply" and divide. Each operation function is tied to a radio button and I would like to alert the user if no radio button was checked. I am really a newbie at this, so I would appreciate all the assistance I could get. Here is where I am at with the coding. I am looking to first check that buttons are not unchecked...which I am thinking means that I have to tie the check to the button used for the operation??

    function operate()
    {
    var radSel = document.getElementByID("");
    var operPlus = document.getElementByID("plus"
    var operMinus = document.getElementByID("minus"
    var operMultiply = document.getElementByID("asterik"
    var operDivide = document.getElementByID("slash"


    }



    }
    </script>

    <form action="formhandler.php" method="post">

    <input type="radio" name="scale" id="plus" value="plus"> + <br>

    <input type="text" id="op1" name="op1" value=""
    tabindex="3" size="10" maxlength="40" >

    <input type="radio" name="scale" id="minus" value="minus"> -

    <input type="text" id="op2" name="op2" value=""
    tabindex="3" size="10" maxlength="40" >

    <input type="button" name="equal" id="equal" value="="/
    onclick = "operate()">

    <input type="text" id="result" name="result" value=""
    tabindex="3" size="10" maxlength="40" >
    <br>


    <input type="radio" name="scale" id="asterik" value="asterik"> *<br>

    <input type="radio" name="scale" id="slash" value="slash"> /<br>
    </form>
    </body>
    </html>

  2. #2
    Join Date
    Sep 2007
    Posts
    301
    Code:
      
    <script type="text/javascript">
    var el = function (myid) { return document.getElementById(myid); }
    function operate()
    {
    var arr = ["plus","minus","asterik","slash"];
    var i = 0, r;
    while( r = el(arr[i++])) {
    r.checked ? el('result').value = eval(Number(el('op1').value) + r.nextSibling.data +Number(el('op2').value)) : null;
    }
    }
    </script>
    
    <form action="formhandler.php" method="post">
    
    <label><input type="radio" name="scale" id="plus" value="plus" > + </label><br>
    <label><input type="radio" name="scale" id="minus" value="minus"> - </label><br>
    <label><input type="radio" name="scale" id="asterik" value="asterik"> * </label><br>
    <label><input type="radio" name="scale" id="slash" value="slash"> / </label><br>
    
    <input type="text" id="op1" name="op1" value=""
    tabindex="3" size="10" maxlength="40" >
    
    
    <input type="text" id="op2" name="op2" value=""
    tabindex="3" size="10" maxlength="40" >
    
    <input type="button" name="equal" id="equal" value="="/
    onclick = "operate()">
    
    <input type="text" id="result" name="result" value=""
    tabindex="3" size="10" maxlength="40" >
    <br>
    
    
    
    </form>
    </body>
    </html>
    Last edited by Ayşe; 11-11-2007 at 03:02 PM.
    İyiliği emret. Kötülükten alıkoy. (31/16)

    hasbunallahuVeNimelVekil++

  3. #3
    Join Date
    Oct 2007
    Posts
    14

    Thank You...

    Thanks the operation works like a charm. Question - If I wanted to write out an alert to the user if none of the buttons were checked, how can I do that here?

  4. #4
    Join Date
    Oct 2007
    Location
    Winnipeg
    Posts
    21
    Quote Originally Posted by ShaolinMonk
    Thanks the operation works like a charm. Question - If I wanted to write out an alert to the user if none of the buttons were checked, how can I do that here?
    Hello Shaolin Monk, I am a bit of a newbie too...
    I think you kinda already answered your own question..
    "IF" you wanted to create an alert, you just need to make an if statement that checks whether a button is selected else, the alert.

  5. #5
    Join Date
    Oct 2007
    Posts
    14
    Quote Originally Posted by blue_masked_man
    Hello Shaolin Monk, I am a bit of a newbie too...
    I think you kinda already answered your own question..
    "IF" you wanted to create an alert, you just need to make an if statement that checks whether a button is selected else, the alert.
    Thanks for the feedback...

    I have tried this, but it is not working. I want to only alert the user if none of the buttons are selected.

    if (!document.form.scale[0].checked &&
    !document.form.scale[1].checked &&
    !document.form.scale[2].checked &&
    !document.form.scale[3].checked) {
    // no radio button is selected
    alert("You must select a radio button.");
    return false;
    }

  6. #6
    Join Date
    Sep 2007
    Posts
    301
    <form name="form1"
    Code:
     
    <script type="text/javascript">
    
    var el = function (myid) { return document.getElementById(myid); }
    function operate()
    {
    if (!document.form1.scale[0].checked &&
    !document.form1.scale[1].checked &&
    !document.form1.scale[2].checked &&
    !document.form1.scale[3].checked) {
    // no radio button is selected
    alert("You must select a radio button.");
    return false;
    }
    if( el('op1').value == "" || el('op2').value =="") {
    alert('fill in the text boxs!');
    return false;
    }
    var arr = ["plus","minus","asterik","slash"];
    var i = 0, r;
    while( r = el(arr[i++])) {
    r.checked ? el('result').value = eval(el('op1').value + r.nextSibling.data +el('op2').value) : null;
    }
    }
    
    </script>
    <form name="form1" action="formhandler.php" method="post">
    
    <label><input type="radio" name="scale" id="plus" value="plus" > + </label><br>
    <label><input type="radio" name="scale" id="minus" value="minus"> - </label><br>
    <label><input type="radio" name="scale" id="asterik" value="asterik"> * </label><br>
    <label><input type="radio" name="scale" id="slash" value="slash"> / </label><br>
    
    <input type="text" id="op1" name="op1" value=""
    tabindex="3" size="10" maxlength="40" onkeyup="this.value = this.value.replace(/\D+/,'')";>
    
    
    <input type="text" id="op2" name="op2" value=""
    tabindex="3" size="10" maxlength="40" onkeyup="this.value = this.value.replace(/\D+/,'')";>
    
    <input type="button" name="equal" id="equal" value="="/
    onclick = "operate()">
    
    <input type="text" id="result" name="result" value=""
    tabindex="3" size="10" maxlength="40" readonly>
    <br>
    
    </form>
    Last edited by Ayşe; 11-12-2007 at 11:59 AM.
    İyiliği emret. Kötülükten alıkoy. (31/16)

    hasbunallahuVeNimelVekil++

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles