Welcome guest. Before posting on our computer help forum, you must register. Click here it's easy and free.

« previous next »
Pages: [1]   Go Down

Author Topic: html radio buttons  (Read 5263 times)

0 Members and 1 Guest are viewing this topic.

helpme101

    Topic Starter


    Rookie

    • Experience: Beginner
    • OS: Unknown
    html radio buttons
    « on: February 25, 2012, 08:31:21 AM »
    I am writing an html code using radio buttons. The program is a unit conversion program, where first you select a radio button to convert either length, weight, or volume. after the user selects length, weight or volume, it should then display another set of radio buttons for the user to select the conversion direction. for example, if the user selected to convert length, the second set of radio button options should be pounds to kilograms, or kilograms to pounds. After this occurs, the user then enters in the number they would like to convert and then hit the convert button to perform the conversion. For me, I am having difficulties displaying the second set of radio buttons. I am thinking of using the onClick property, and then call a function, but I can't seem to be able to do that. any suggestions?
    Logged

    Rob Pomeroy



      Prodigy

    • Systems Architect
      • Thanked: 124
      • Me
    • Experience: Expert
    • OS: Other
    Re: html radio buttons
    « Reply #1 on: February 27, 2012, 06:12:34 AM »
    jQuery.

    Use named divs:

    Code: [Select]
    <div id="div1">Extra form controls here</div>

    Then use onClick events to show or hide elements as required.

    Code: [Select]
    $("#div1").hide();
    Logged
    Only able to visit the forums sporadically, sorry.

    Geek & Dummy - honest news, reviews and howtos

    helpme101

      Topic Starter


      Rookie

      • Experience: Beginner
      • OS: Unknown
      Re: html radio buttons
      « Reply #2 on: February 27, 2012, 05:00:37 PM »
      i haven't learned about JQuery. I have created the set up and layout of the program. But problems right now, lie in the calculate function and the result text box. I'm not sure if i'm writing my calculate function properly. and also, when the user clicks the calculate button, the result is displayed in the results text box below the calculate button. here is my code

      Code: [Select]


      <!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()
      {
         
      A = document.getElementByID(amount);
      res = document.getElementByID(fin);
      if (rad2[0].checked)
          {
              res.value = A / 2.2
          }
      else
          res.value = A* 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 />
      Result: <br />
      <input type ="text" name = "fin"  value="" readonly="readonly"/>
      </div>

      <br />
      <br />
      <br />
      <br />



             

             
          </body>
      </html>
      Logged

      Rob Pomeroy



        Prodigy

      • Systems Architect
        • Thanked: 124
        • Me
      • Experience: Expert
      • OS: Other
      Re: html radio buttons
      « Reply #3 on: March 14, 2012, 05:54:20 AM »
      Couple of syntax errors straight off:

      document.GetElementById, not document.GetElementByID (yep, javascript is case sensitive on function names).

      document.GetElementById('divname'), not document.GetElementById(divname) (search is for a string, not an object).
      Logged
      Only able to visit the forums sporadically, sorry.

      Geek & Dummy - honest news, reviews and howtos

      kpac

      • Web moderator


        • Hacker

      • kpac®
        • Thanked: 184
        • Yes
        • Yes
        • Yes
      • Certifications: List
      • Computer: Specs
      • Experience: Expert
      • OS: Windows 7
      Re: html radio buttons
      « Reply #4 on: March 17, 2012, 08:32:34 AM »
      Quote from: Rob Pomeroy on March 14, 2012, 05:54:20 AM
      Couple of syntax errors straight off:

      document.GetElementById, not document.GetElementByID (yep, javascript is case sensitive on function names).

      document.GetElementById('divname'), not document.GetElementById(divname) (search is for a string, not an object).
      Actually, the "G" has to be lowercase as well.

      Code: [Select]
      document.getElementById();
      Logged

      Rob Pomeroy



        Prodigy

      • Systems Architect
        • Thanked: 124
        • Me
      • Experience: Expert
      • OS: Other
      Re: html radio buttons
      « Reply #5 on: March 22, 2012, 05:46:19 AM »
      Oops.  Yes, well spotted.  *blush*
      Logged
      Only able to visit the forums sporadically, sorry.

      Geek & Dummy - honest news, reviews and howtos

      yuanhaojuress0303



        Starter

        • Experience: Beginner
        • OS: Unknown
        Re: html radio buttons
        « Reply #6 on: April 13, 2012, 08:57:52 PM »
        I'm not sure if i'm writing my calculate function properly. and also, when the user clicks the calculate button, the result is displayed in the results text box below the calculate button. here is my code
        Logged

        Rob Pomeroy



          Prodigy

        • Systems Architect
          • Thanked: 124
          • Me
        • Experience: Expert
        • OS: Other
        Re: html radio buttons
        « Reply #7 on: April 16, 2012, 03:05:37 AM »
        Quote from: yuanhaojuress0303 on April 13, 2012, 08:57:52 PM
        I'm not sure if i'm writing my calculate function properly. and also, when the user clicks the calculate button, the result is displayed in the results text box below the calculate button. here is my code

        Please start your own thread.
        Logged
        Only able to visit the forums sporadically, sorry.

        Geek & Dummy - honest news, reviews and howtos
        Pages: [1]   Go Up
        « previous next »