SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Portland, OR, USA
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Radio buttons to calculate a form

    I have a text field, a few radio buttons, then another text field. I want a user to put a number into the first form, click on one of the radio buttons, and have it return a calculated value into the last text field. Here's what I have so far:
    Code:
     <script language="javascript" type="text/javascript" >
     function check(percent)
     {
     var percent=document.forms[0].percent.value
     var bill=document.forms[0].bill.value
     var tip = (bill*percent)
     document.forms[0].answer.value=tip
     }
     </script>
     </head>
     
     <body>
     <form>
     Total amount of bill:
     <input type="text" name="bill"><br />
     
     <input type="radio"
     name="percent" onclick="check(this.value)"
     value=".10">Poor Service<br>
     
     <input type="radio"
     name="percent" onclick="check(this.value)"
     value=".15">Adequate Service<br>
     
     <input type="radio"
     name="percent" onclick="check(this.value)"
     value=".18">Good Service<br />
     
     <input type="radio"
     name="percent" onclick="check(this.value)"
     value=".20">Great Service<br />
     
     <input type="radio"
     name="percent" onclick="check(this.value)"
     value=".30">Complimentary meal<br />
     
     <input type="text" name="answer">
     </form>
    My JavaScript is pretty rusty, so I'm not sure what the problem is, but it keeps returning "NaN". Thanks everybody!

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm...you've passed the (calling) radio button's value to the function:
    Code:
    ...onclick="check(this.value)"...
    ...a good start. Then...
    Code:
    function check(percent)
     {
     var percent=document.forms[0].percent.value
    ...you've overridden it by declaring a new local variable of the same name (parameters - listed in the parentheses - automatically declare variables of that name). No need to 'go out and get it', as you've already passed it in the argument. If you wanted to use this approach, you'd need to loop through the button array, looking for the .checked radio, and getting its value.

    Both values are strings, but multiplying them will trigger automatic type conversion to numbers, a reasonable assumption as to your intent. Better approach:
    Code:
    function check(percent)
    {
        percent = Number(percent);
        var bill = Number(document.forms[0].bill.value);
        document.forms[0].answer.value = (bill * percent).toFixed(2);
    }
    A quick tip: any time you get puzzling error messages like '....is NaN', stick some alert()s in there to see exactly what values are being supplied to the function. Beats staring at the screen for long intervals.
    ::: certified wild guess :::

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Portland, OR, USA
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much! I hate it when it's one of those less-than-blatant things that just eludes me for hours. :-)

  4. #4
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem. Just added a rounder-offer for you.
    ::: certified wild guess :::

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Portland, OR, USA
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again! I had figured out another way, but it was one line of code longer and every little bit helps!


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
  •