Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14

Thread: radio buttons

  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    radio buttons

    I'm creating a unit converter program using radio buttons and i can't seem to get one aspect working. i can't seem to get another set of radio buttons to display. the way the program is supposed to work is there will be 3 radio buttons saying to convert length, weight, and volume. if the user selects to convert weight, another set of radio buttons will appear with 2 options, to convert from pounds to kilograms, or kilograms to pounds. then the user enters the number in a text box and clicks to convert button. my problem is getting the second set of radio buttons to display. I have no clue how to get this to work. to get a better understanding of whats going on, here is the program without the radio buttons that i created. i'm trying to use radio buttons in place of the prompting message.

    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <title> Conversions of Weight and Length</title>
            
            <script type="text/javascript">
            
            function clearMe() 
            { 
                var _s=top; 
                var _d=_s.document; 
                _d.open(); 
                _d.write(""); 
                _d.close(); 
            } 
            function main()
            {
                          
                
                var repeat = confirm("Do you want to perform another conversion ? \r" + "<p><b>Note:</b> Pressing OK allows for another conversion, and pressing CANCEL exits</p>");
                
                if(repeat==true)
                    {
                        convert();
                    }
                else 
                    {
                        alert("Your program has been terminated!");
                        self.close();            
                    }
            }
                
            
           
            function convert()
            {
                var unit, direction, value, result, original_units, new_units;
                document.write("<br/><br/>")
                document.write("Weight and Length conversion menu" + "<br/><br/>");
                document.write("1. convert length" + "<br />");
                document.write("2. convert weight" + "<br />");
                document.write("3. convert volume" + "<br />");
                  
                       unit = window.prompt("select conversion type: ");
                  
                  if ((unit<0) || (unit>3))
                  {
                      alert("Select Menu option 1, 2, or 3!");
                      unit = window.prompt("Select conversion type: ");
                  }
                  switch (unit)
                  {
                      case '1':
                         direction = choose_direction("<br /><br />1. Feet to meters<br />" , "2. Meters to feet <br />");
                          if (direction =='1')
                              {
                                  original_units = "meters"; new_units = "meters";
                                 
                              }
                              else {
                                  new_units = "feet"; original_units = "meters";
                              }
                              break;
                      case '2':
                          direction = choose_direction("<br /><br />1. Pounds to kilograms <br />", "2. Kilograms to pounds <br /> <br />"); 
                          if (direction =='1')
                              {
                                 original_units = "pounds"; new_units = "kilograms";
                                 
                              }
                              else {
                                  new_units = "pounds"; original_units = "kilograms";
                              }
                              break;
                      case '3':
                          direction = choose_direction("<br /><br />1. Gallons to liters<br />", "2. Liters to gallons <br /><br />");
                          if (direction =='1')
                              {
                                 original_units = "gallons"; new_units = "liters";
                                 
                              }
                              else {
                                  new_units = "gallons"; original_units = "liters";
                              }
                              break;
                              
                              
                  
                  }
                   value = window.prompt("Enter value to be converted:")
                  
                  
                  switch(unit)
                  {
                      case '1':
                          result = feet_meters(value, direction);
                          break;
                      case '2':
                          result = pounds_kilograms(value, direction);
                          break;
                      case '3':
                          result = gallons_liters(value, direction);
                          break;
                  }
                  document.write(value + original_units + " = " + result + new_units);
                              
            }
            function choose_direction(option1, option2)
            {
                 var direction;
                document.write(option1);
                document.write(option2);
                do
                {
                    window.prompt("Select a conversion direction");
                    return direction;
                }
                while ((direction!='1') || (direction !='2'));
                                  
            }
            function pounds_kilograms(value, direction)
            {
                if (direction == '1')
                   return parseFloat(value)/parseFloat(2.2046);
                
                else
                    return parseFloat(value)*parseFloat(2.2046);
            }
            function gallons_liters(value, direction)
            {
                if (direction == '1')
                    return parseFloat(value)*parseFloat(3.7854);
                else
                    return parseFloat(value)/parseFloat(3.7854);
            }
            function feet_meters(value, direction)
            {
                if (direction == '1')
                    return parseFloat(value)/parseFloat(3.2808);
                else
                    return parseFloat(value)*parseFloat(3.2808);
            }
            
            </script>
        </head>
        <body>
            <h1> weight and length conversion </h1>
            <script type="text/javascript">
              convert();            
               main();
            </script>
            
        </body>
    </html>
    Last edited by needhelp101; 02-26-2012 at 08:35 AM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Homework? Hide the second group of buttons with <div id = "mydiv" style="display:none"> and then when the "weight" selection is made from the first group show the div containing the second group with document.getElementById("mydiv").style.display="block";


    Code:
    <form name = "myform">
    Length <input type = "radio" name = "rad1">
    Weight <input type = "radio" name = "rad1" onclick = "showSecond()">
    Volume <input type = "radio" name = "rad1" >
    
    <div id = "mydiv" style="display:none">
    Pounds to Kgs <input type = "radio" name = "rad2">
    Kgs to Pounds <input type = "radio" name = "rad2">
    Amount <input type = "text" name = "amount">
    </div>
    </form>
    
    <script type = "text/javascript">
    
    function showSecond() {
    document.getElementById("mydiv").style.display = "none";
    if (document.myform.rad1[1].checked) {
    document.getElementById("mydiv").style.display = "block";
    }
    
    }
    
    </script>
    Study this and learn from it, please.


    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 02-26-2012 at 08:51 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok, thanks. i really appreciate it. i never encountered using forms, and thats something i havent learned. thanks for your help, thats really put me on the right track

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by needhelp101 View Post
    ok, thanks. i really appreciate it. i never encountered using forms, and thats something i havent learned. thanks for your help, thats really put me on the right track
    So how is it that your teacher is setting you assignments before you have the necessary knowledge of the subject to actually do them? I have to say that your code (posted after my response) is absurdly convoluted. KISS! Where are the radio buttons you talked of?

    document.write statements must be run before the page finishes loading. Any document.write statement that runs after the page finishes loading will create a new page and overwrite all of the content of the current page (including the Javascript which called it). So document.write is at best really only useful to write the original content of your page. It cannot be used to update the content of your page after that page has loaded.
    Last edited by Philip M; 02-26-2012 at 09:11 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm not sure. we did look at div elements, but never went over forms. when i posted my code, i was unaware of your response. The radio buttons were not in the code i posted. That was the code without any radio buttons. i had mentioned that i wanted to replace the prompting box with radio buttons.

    document.write statements, i used in coincidence with the prompting box. it was basically the menu of options for the prompting box

  • #6
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    is there any way to write a code that says that 2 radio buttons are checked, get the amount that is in the amount box, and calculate the result. for example, the user selects to convert weight, to go from Pounds to Kgs, and enter the number 10. i'm trying to create a calculate function, and call that function when the user clicks the calculate button, but i'm not sure how i would implement all of the conditions in it.

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    We cannot do all your homework for you! Show the code you have written, and if you have made a reasonable effort then doubtless someone will help you correct and/or improve it.

    Hint:

    Code:
    if (rad2[0].checked) {    // user has selected Pounds to Kgs
    result = valueEntered * 0.45359237;  // conversion factor
    }
    if (rad2[1].checked) {  // user has selected Kgs to Pounds
    result = valueEntered * 2.20462262;  // conversion factor
    }

    It is not really in your best interests that others do your all or most homework for you. Your teacher may gain a false and exaggerated idea of your programming capabilities and so not offer you the support you need. Also, if you hand in other people's work which you do not completely understand, then you will start to fall behind and your difficulties will increase. Finally, there is a limit to the number of times that you can take your pitcher to this well!
    Last edited by Philip M; 02-26-2012 at 05:56 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #8
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i'm not trying to have u all do my homework. all i was asking was to be pointed in the right direction. just to get an idea. but anyways, sorry for not putting up any coding. got too many things going on, that i forget a lot of things. this is the coding i have so far, of course its not completely finished. but this will be my last problem. after i click the calculate button, i want to have the result displayed in the textbox i created below the calculate button. i've been trying different ways, but can't seem to get it to display on there.

    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <title> Conversions of Weight and Length</title>
            <body>
            <form name = "conversion">
    Select Conversion Type: 
     <br />
     <input type = "radio" name = "rad1" onclick= "showSecond()" />Length
     <br />
     <input type = "radio" name = "rad1" onclick = "showSecond()" />Weight
     <br />
     <input type = "radio" name = "rad1" onclick = "showSecond()" />Volume
     <br />
    
    
    <div id = "div" style="display:none">
    Select Direction:
    <br />
     <input type = "radio" name = "rad2" value="PG" />Pounds to Kgs
    <br />
     <input type = "radio" name = "rad2" value="KP" />Kgs to Pounds
    <br />
    Number to be converted: <input type = "text" name = "amount" />
    <br />
    <input type = "button" value = "calculate" onclick = "Calc()" /> 
    </div>
    
    <div id = "div1" style="display:none">
    Select Direction:
    <br />
     <input type = "radio" name = "rad3" value="FM" />Feet to meters
    <br />
     <input type = "radio" name = "rad3" value="MF" />Meters to Feet
    <br />
    Number to be converted: <input type = "text" name = "amount" />
    <input type = "button" value = "calculate" onclick = "Calc()" /> 
    <br />
    </div>
    
    <div id = "div2" style="display:none">
    Select Direction:
    <br />
     <input type = "radio" name = "rad4" value="GL" />Gallons to Liters
    <br />
     <input type = "radio" name = "rad4" value="LG" />Liters to Gallons
    <br />
    Number to be converted: <input type = "text" name = "amount" />
    <br />
    <input type = "button" value = "calculate" onclick = "Calc()"> 
    <br />
    <input type ="text" name = "result" id = "result"/>
    </div>
    
    <br />
    <br />
    <br />
    <br />
    
    </form>
    
    <script type = "text/javascript">
    
    function showSecond() {
    document.getElementById("div").style.display = "none";
    if (document.conversion.rad1[1].checked) {
    document.getElementById("div").style.display = "block";}
    else if (document.conversion.rad1[0].checked) {
    document.getElementById("div1").style.display = "block";}
    else if (document.conversion.rad1[2].checked) {
    document.getElementById("div2").style.display = "block";
    }
    
    }
    function Calc()
    {
      if (rad2[0].checked) result = amount / 2.20462262;
    else result = amount * 2.20462262;  // conversion factor
      
    }
    
    
    </script>
    
            
        </body>
    </html>

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Do not use the same name "result" for an HTML element and a Javascript variable.

    Surely you can place the result of the calculation into the text box? If not I would point you in the right direction by saying that you should seriously consider giving up Javascript!

    function Calc()
    {
    if (rad2[0].checked) result = amount / 2.20462262;
    else result = amount * 2.20462262; // conversion factor

    See anything wrong here? Also just one / as a comment will cause an error. And you need to get the value of the amount box using document.conversion.amount.value; And it is unwise (sloppy) to leave out the braces { } following an if or else statement.

    Also if you use an else clause rather than the code I gave you the calculation will (or might!) take place if rad2[0] is not checked - but that is bound to be the case if you are doing a different conversion. It is always depressing when beginners think they can disregard the advice/code they have been given.

    One more time - So how is it that your teacher is setting you assignments before you have the necessary knowledge of the subject to actually do them?
    Last edited by Philip M; 02-27-2012 at 07:50 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #10
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    we don't have the necessary knowledge because we never went over that in class. come to find out, my teacher does not want me to use forms. so i have to take the form out, and redo the whole thing.

  • #11
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Well, it looks as though we have been wasting each others' time. But you must use a form if you are using radio buttons. I would get a new teacher!

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #12
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i guess so. sorry for wasting your time, but i appreciate you taking the time to help me out.

  • #13
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    even though I'm not using forms, i was wondering if you could still help me out. I am still having trouble with the calculate function and pointing the answer to display in the results text box. this is my code so far.

    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <title> Conversions of Weight and Length</title>
            
               
    <script type = "text/javascript">
    
    function showSecond() {
    if (document.getElementsByTagName("input")[0].checked){
        div1.style.display = "block";
        div.style.display = "none";
        div2.style.display = "none";
    }
    else if (document.getElementsByTagName("input")[1].checked){
        div1.style.display = "none";
        div.style.display = "block";
        div2.style.display = "none";
    }
    else {
        div1.style.display = "none";
        div.style.display = "none";
        div2.style.display = "block";
    }
    }
    function Calc()
    {
        
    
    if (document.getElementByName("rad2")[0].checked) 
        {
            result = amount*2.2;  // conversion factor
        }
    
    
    else result = amount/2.2;
    }
    
    </script>
        </head>
        <body>
    Select Conversion Type: 
     <br />
     <input type = "radio" name = "rad1" onclick= "showSecond()" />Length
     <br />
     <input type = "radio" name = "rad1" onclick = "showSecond()" />Weight
     <br />
     <input type = "radio" name = "rad1" onclick = "showSecond()" />Volume
     <br />
            
            <div id = "div" style="display:none">
    Select Direction:
    <br />
     <input type = "radio" name = "rad2" value="PG" />Pounds to Kgs
    <br />
     <input type = "radio" name = "rad2" value="KP" />Kgs to Pounds
    <br />
    Number to be converted: <input type = "text" name = "amount" />
    <br />
    <input type = "button" value = "calculate" onclick = "Calc()" /> 
    <br />
    <input type ="text" name ="fin" value="" readonly="readonly"/>
    </div>
    
    <div id = "div1" style="display:none">
    Select Direction:
    <br />
     <input type = "radio" name = "rad3" value="FM" />Feet to meters
    <br />
     <input type = "radio" name = "rad3" value="MF" />Meters to Feet
    <br />
    Number to be converted: <input type = "text" name = "amount" value=""/>
    <br />
    <input type = "button" value = "calculate" onclick = "Calc()" /> 
    <br />
    Result: <br />
    <input type="text" name ="fin" value ="" readonly="readonly"/>
    </div>
    
    <div id = "div2" style="display:none">
    Select Direction:
    <br />
     <input type = "radio" name = "rad4" value="GL" />Gallons to Liters
    <br />
     <input type = "radio" name = "rad4" value="LG" />Liters to Gallons
    <br />
    Number to be converted: <input type = "text" name = "amount" />
    <br />
    <input type = "button" value = "calculate" onclick = "Calc()"> 
    <br />
    <input type ="text" name = "fin"  value="" readonly="readonly"/>
    </div>
    
    <br />
    <br />
    <br />
    <br />
    
    
    
           
    
            
        </body>
    </html>

  • #14
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    if (document.getElementByName("rad2")[0].checked)

    No such thing as document.getElementByName.

    I am sorry, but I have had enough of this. If you (or your teacher) insist on trying to do it in a silly and incorrect way and ignoring what you have been told, then I have lost interest.

    I'll say it just one more time. You address a radio button with document.formname.radiobuttongroupname[index].
    Example: document.formname.rad1[2] - the third button in the rad1 group.

    And you address a form field with document.formname.fieldname.value or document.getElementById("fieldid").value.
    But as I say, there is no point or advantage in assigning an id to a form field.

    Can we finish with this now, please. Your teacher clearly wonks best.
    Last edited by Philip M; 02-28-2012 at 07:50 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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