4 Replies Latest reply on Jun 26, 2007 10:50 AM by silviasalsa

    Radio Button  javascript onclick  show hide textbox

    silviasalsa Level 1
      Currently, if the radio button is clicked then text box is shown else if radio button 2 is clicked then textbox is invisible. (only one textbox being shown or being hidden)

      I wish to have 2 text boxes

      If radio button 1 is clicked then textbox1 is visible
      If radio button 2 is clicked then textbox2 is visible.

      What changes do I have to do in my code for this to work?

      feel free to test this.

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns=" http://www.w3.org/1999/xhtml">
      <head>
      <script type="text/javascript">
      function hide() {
      var div_ref = document.all("id_div");
      div_ref.style.visibility = "hidden";
      }

      function show() {
      var div_ref = document.all("id_div");
      div_ref.style.visibility = "visible";
      }


      </script>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />



      </head>

      <body>
      <tr>
      <td>
      Select Device Type <BR>
      </td>
      <td style="width:200">
      <input type="Radio" name="DeviceGroup" value="Radiobutton1" onclick="show();" checked="checked">Radio button 1
      <input type="Radio" name="DeviceGroup" value="Radiobutton2" onclick="hide();" unchecked>Radio button 1
      </td>
      <td>
      <div id=id_div style="visibility:hidden;">
      Show Textbox1
      <input type="Text" name="Textbox1">
      </div>
      </td>
      </tr>

      </body>
      </html>


      Thanks
        • 1. Re: Radio Button  javascript onclick  show hide textbox
          elDonrico
          being that you are not working within a form, i am assuming that you are not going to be submitting data depending on the active text box. and in assuming this, why use form elements anyway?

          also, instead of having 2 javascripts controlling the show hide, just join them and assume that at each click the div is visible.

          the first part of the if statement in the js just makes sure the div's display is none. then it displays the one you are calling.
          the else allows you to close the divs without having any open.

          i'm doing this from home, so i cant really test it, but, it looks like it should work.


          • 2. Radio Button  javascript onclick  show hide textbox
            silviasalsa Level 1
            thanks

            YES
            i will be submitting data to a field in the database.

            First the vlaue of the radio Button
            For example if the first radio button
            then the value of the first radio button value =1
            goes to the field in the database

            also

            the text box that will show. will have data entered in the tesx box and the value will be submitted
            to a field.


            thanks

            shall i still use your code????

            thanks

            --------------------------------

            also, instead of having 2 javascripts controlling the show hide, just join them and assume that at each click the div is visible.

            the first part of the if statement in the js just makes sure the div's display is none. then it displays the one you are calling.
            the else allows you to close the divs without having any open.

            i'm doing this from home, so i cant really test it, but, it looks like it should work.



            Attach Code
            • 3. Re: Radio Button  javascript onclick  show hide textbox
              silviasalsa Level 1
              Hello elDonrico
              thanks
              do i replace the current java script function in the head and the java script in the body.

              or

              do i just add your code?

              thanks

              • 4. Re: Radio Button  javascript onclick  show hide textbox
                silviasalsa Level 1
                Hello elDonrico,

                i have just tried out your code and it works great.

                what changes do i have to do to make the link a radio button and the text to be the text box?

                again,
                thanks