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
    Location
    istanbul
    Posts
    315
    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.
    Bismillahirrahmanirrahîm
    Hamd, Âlemlerin Rabbi, Rahmân, Rahîm, hesap ve ceza gününün (ahiret gününün) maliki Allah'a mahsustur. (Allahım!) Yalnız sana ibadet ederiz ve yalnız senden yardım dileriz. Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

  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
    Location
    istanbul
    Posts
    315
    <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.
    Bismillahirrahmanirrahîm
    Hamd, Âlemlerin Rabbi, Rahmân, Rahîm, hesap ve ceza gününün (ahiret gününün) maliki Allah'a mahsustur. (Allahım!) Yalnız sana ibadet ederiz ve yalnız senden yardım dileriz. Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

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