SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Dec 1999
    Location
    Highlands Ranch, CO
    Posts
    193
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Radio buttons and Javascript

    I have to make a form that has 2 radio buttons:
    Are you a member? Yes | No

    And depending on what they select, it changes the value of the products they can purchase:
    Code:
    <script language="JavaScript">
    
    function member(select) {
    if (select == "no")
    {
    var Prod1 = 100;
    var Prod2 = 200;
    var Prod3 = 10;
    var Prod4 = 10;
    var Prod5 = 250;
    var Prod6 = 95;
    }
    else 
    {
    var Prod1 = 0;
    var Prod2 = 100;
    var Prod3 = 0;
    var Prod4 = 0;
    var Prod5 = 200;
    var Prod6 = 75;
    }
    }
    </script>
    I tried:

    <input type="radio" name="member" value="yes" onClick="member('yes');">
    <input type="radio" name="member" value="no" onClick="member('no');">

    I am not a javascript person - so can someone help me out on this?

    I would like it to be an 'onClick or onFocus' event because I am making a calculator, and need the values immediately.

    TIA

  2. #2
    JavaScript Guru (Big Ego) Arielladog's Avatar
    Join Date
    Jul 1999
    Location
    SC, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Chad J,

    JavaScript really isn't that hard, and what you did seemed to me 100% correct at first glance; however, I did figure out what went wrong (very, very minor)

    For some reason, when you call the function inside the scope of the radio button, it tries to call that function in that same scope and then propogates outward, trying to find a match for the function name to try to run. Atleast, this'd be my guess at what happened.

    So, first it checks:

    window.documents.forms[formName].elements.member()
    window.documents.forms[formName].members()
    window.documents.forms.member()
    window.documents.member()
    window.member()
    member()

    (or atleast it seems as if it does something similar from a few tests I ran).

    Anyway, it finds a match in the first case and tries to run it as a function, but it can't, so that is where the error stems from. What you can do is just change the name of the function from "member" to something else, like "memberF" Example:

    <script language="JavaScript">

    function memberF(select) {
    if (select == "no")
    {
    var Prod1 = 100;
    var Prod2 = 200;
    var Prod3 = 10;
    var Prod4 = 10;
    var Prod5 = 250;
    var Prod6 = 95;
    }
    else
    {
    var Prod1 = 0;
    var Prod2 = 100;
    var Prod3 = 0;
    var Prod4 = 0;
    var Prod5 = 200;
    var Prod6 = 75;
    }
    }
    </script>

    <input type="radio" name="member" value="yes" onClick="memberF('yes');">
    <input type="radio" name="member" value="no" onClick="memberF('no');">

    aDog

  3. #3
    SitePoint Zealot
    Join Date
    Dec 1999
    Location
    Highlands Ranch, CO
    Posts
    193
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Arielladog,

    Thanks for the description, but I tried what you said, and it didn't work. I spent some time reading into it more (after reading your explaination) and couldn't figure it out. If I recall correctly it was giving me an 'object undefined error' for the 'Prod1' variable.

    Doesn't matter really, I gave up - gave me a headache.

    Thanks for your help though!

  4. #4
    ********* obeah makeda's Avatar
    Join Date
    Jun 2001
    Location
    rollin' on dubs
    Posts
    492
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if you decide to pick it up again, try declaring all of your varialbles before your if/else statement. ex.


    function memberF(select) {
    var Prod1;
    var Prod2;
    var Prod3;
    var Prod4;
    var Prod5;
    var Prod6;


    if (select == "no")
    {
    Prod1 = 100;
    Prod2 = 200;
    Prod3 = 10;
    Prod4 = 10;
    Prod5 = 250;
    Prod6 = 95;

    }
    else
    {
    Prod1 = 0;
    Prod2 = 100;
    Prod3 = 0;
    Prod4 = 0;
    Prod5 = 200;
    Prod6 = 75;
    }
    }

  5. #5
    SitePoint Zealot
    Join Date
    Dec 1999
    Location
    Highlands Ranch, CO
    Posts
    193
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    makeda -

    Thanks for your response. I may have tried that, and if I didn't (and it works) I will beat myself.

    I tried just about everything I could find on the subject, and nothing seemed to work. Coulda sworn I declared them. I know for a fact that before the function I did set them:
    Code:
    <script language="JavaScript">
    var Prod1 = 100;
    var Prod2 = 200;
    var Prod3 = 10;
    var Prod4 = 10;
    var Prod5 = 250; 
    var Prod6 = 95; 
    
    function member(select) {
    if (select == "no")
    {
    Prod1 = 100;
    Prod2 = 200;
    Prod3 = 10;
    Prod4 = 10;
    Prod5 = 250;
    Prod6 = 95;
    }
    else 
    {
    Prod1 = 0;
    Prod2 = 100;
    Prod3 = 0;
    Prod4 = 0;
    Prod5 = 200;
    Prod6 = 75;
    }
    }
    </script>
    Would this be essentially the same? I see that it gives the variables an initial value, but the function changes them right? I assumed that that would work - but it didn't.

  6. #6
    SitePoint Zealot
    Join Date
    Dec 1999
    Location
    Highlands Ranch, CO
    Posts
    193
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Update:

    I tried this code:
    Code:
    <script language="JavaScript">
    
    
    function memberF(select) {
    var Prod1;
    var Prod2;
    var Prod3;
    var Prod4;
    var Prod5; 
    var Prod6;
     
    if (select == "no")
    {
    Prod1 = 100;
    Prod2 = 200;
    Prod3 = 10;
    Prod4 = 10;
    Prod5 = 250;
    Prod6 = 95;
    }
    else 
    {
    Prod1 = 0;
    Prod2 = 100;
    Prod3 = 0;
    Prod4 = 0;
    Prod5 = 200;
    Prod6 = 75;
    }
    }
    </script>
    
    Yes <input type="radio" name="member" value="yes" onClick="memberF('yes');"><br>
    No <input type="radio" name="member" value="no" onClick="memberF('no');">
    I get an error: ProdX undefined.
    This is not when this function is being called, but rather when it tries to use the values in calculation (probably where my problem lies):

    Code:
    <input type="text" name="qProd1" size="2" value="0" onBlur="YY_CalculateForm('document.form1','tProd1','2','Prod1','*','#qProd1');YY_CalculateForm('document.form1','tProd','2','#tProd1','+','#tProd2','+','#tProd3','+','#tProd4','+','#tProd5','+','#tProd6')" style="font-size:9px">
    
    <input type="text" name="tProd1" size="6" value="0.00" style="font-size:9px">
    Calls this function:
    Code:
    function YY_CalculateForm() { //v3.03
    //copyright (c)1999-2001 Yaromat.com
      var args=YY_CalculateForm.arguments;
      var myResult=""; var myField="0";
      if (document.all){eval("args[0]=args[0].replace(/.layers/gi, '.all');");}
      for (var i=3; i<args.length; i++){
        if(args[i].charAt(0)!="#"){
          myResult=myResult+args[i];
        }else{
          myField=eval(args[0]+'.'+ args[i].substring(1)+'.value'); if(myField=="")myField="0";
          myResult=myResult+myField;
        }
      }
      with (Math) {
        var myExpo = pow(10, args[2]);
        var myResult = round(myExpo*eval(myResult)/1)/myExpo+"";
        myResult += (myResult.indexOf('.')==-1)?".":"";
        var missingZ = (args[2] - myResult.length + myResult.indexOf('.') + 1);
        for (var i=0; i<missingZ; i++){ myResult += "0" }
      }
      var myReturn = eval(args[0]+'.'+args[1]);
      myReturn.value = myResult;
    }
    Which works fine if I dont use the radio buttons.
    Last edited by Chad J; Jan 28, 2002 at 14:59.

  7. #7
    SitePoint Zealot
    Join Date
    Dec 1999
    Location
    Highlands Ranch, CO
    Posts
    193
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok. Got it fixed. Not sure how, but it works.

    Thanks for your help!

    Chad


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
  •