Hide table using radio button

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Don Grover
    #1

    Hide table using radio button

    I have a table thats wrapped in a div tag, that when user selects 1 of 2
    radio buttons it hides or shows table, this works ok.
    But I want to set the table show hide on what the existing state of radio
    buttons are on page load aswell, so if one button is allready selected then
    the table is hidden else it is shown, can some help me with this,
    Existing code below Regards Don.


    '************** **
    <html>
    <head>
    </head>

    <body>

    <form method="POST" action="userins ert.asp" name="Form1">
    <table border="0">
    <tr>
    <td nowrap class="labelhea der">Purchase Type:</td>
    <td nowrap class="labelhea der" valign="middle" >Use Credit Card: <input
    type="radio" value="0" onfocus="showpu rchase('purchas ing');return true;"
    name="chargetyp e">&nbsp;</td>
    <td nowrap class="labelhea der" valign="middle" >Use Purchase Orders:
    <input type="radio" name="chargetyp e" value="1"
    onfocus="hidepu rchase('purchas ing');return false;" checked></td>
    </tr>
    </table>
    <div id="purchasing " class="options" style="display: block; width: 377;
    height: 26">
    <table id="MyTable" border="0" width="39%">
    <tr>
    <td nowrap class="labelhea der">This line should hide if Purchase
    Order Selected</td>
    </tr>
    </table>
    </div>
    <table border="0" width="39%">
    <tr>
    <td width="39%" nowrap colspan="3"><in put type="submit" value="Save
    Details" name="btnSave" class="cmdflat" tabindex="24">
    <input type="reset" value="Reset" name="B2" class="cmdflat"
    tabindex="25"></td>
    <td width="63%" nowrap class="labelhea der">&nbsp;&nbs p; <b>Required
    Fields (*)</b></td>
    </tr>
    </table>
    </form>


    <script type="text/JavaScript">
    <!--
    function showpurchase(th eTable)
    {
    if (document.getEl ementById(theTa ble).style.disp lay == 'none')
    {
    document.getEle mentById(theTab le).style.displ ay = 'block';
    }
    }
    //-->

    <!--
    function hidepurchase(th eTable)
    {
    if (document.getEl ementById(theTa ble).style.disp lay == 'none')
    {
    document.getEle mentById(theTab le).style.displ ay = 'none';
    }
    else
    {
    document.getEle mentById(theTab le).style.displ ay = 'none';
    }
    }
    //-->
    </script>

    </body>

    </html>



    '************** **


    Tags: hiding, show
    • Willy Wanka
      #2
      Re: Hide table using radio button

      "Don Grover" <spamfree@assof t.com.au> wrote in message
      news:c5n27g$23r 7$1@otis.netspa ce.net.au...[color=blue]
      > I have a table thats wrapped in a div tag, that when user selects 1 of 2
      > radio buttons it hides or shows table, this works ok.
      > But I want to set the table show hide on what the existing state of radio
      > buttons are on page load aswell, so if one button is allready selected[/color]
      then[color=blue]
      > the table is hidden else it is shown, can some help me with this,
      > Existing code below Regards Don.
      >
      >
      > '************** **
      > <html>
      > <head>
      > </head>
      >
      > <body>
      >
      > <form method="POST" action="userins ert.asp" name="Form1">
      > <table border="0">
      > <tr>
      > <td nowrap class="labelhea der">Purchase Type:</td>
      > <td nowrap class="labelhea der" valign="middle" >Use Credit Card:[/color]
      <input[color=blue]
      > type="radio" value="0" onfocus="showpu rchase('purchas ing');return true;"
      > name="chargetyp e">&nbsp;</td>
      > <td nowrap class="labelhea der" valign="middle" >Use Purchase Orders:
      > <input type="radio" name="chargetyp e" value="1"
      > onfocus="hidepu rchase('purchas ing');return false;" checked></td>
      > </tr>
      > </table>
      > <div id="purchasing " class="options" style="display: block; width: 377;
      > height: 26">
      > <table id="MyTable" border="0" width="39%">
      > <tr>
      > <td nowrap class="labelhea der">This line should hide if Purchase
      > Order Selected</td>
      > </tr>
      > </table>
      > </div>
      > <table border="0" width="39%">
      > <tr>
      > <td width="39%" nowrap colspan="3"><in put type="submit" value="Save
      > Details" name="btnSave" class="cmdflat" tabindex="24">
      > <input type="reset" value="Reset" name="B2" class="cmdflat"
      > tabindex="25"></td>
      > <td width="63%" nowrap class="labelhea der">&nbsp;&nbs p; <b>Required
      > Fields (*)</b></td>
      > </tr>
      > </table>
      > </form>
      >
      >
      > <script type="text/JavaScript">
      > <!--
      > function showpurchase(th eTable)
      > {
      > if (document.getEl ementById(theTa ble).style.disp lay == 'none')
      > {
      > document.getEle mentById(theTab le).style.displ ay = 'block';
      > }
      > }
      > //-->
      >
      > <!--
      > function hidepurchase(th eTable)
      > {
      > if (document.getEl ementById(theTa ble).style.disp lay == 'none')
      > {
      > document.getEle mentById(theTab le).style.displ ay = 'none';
      > }
      > else
      > {
      > document.getEle mentById(theTab le).style.displ ay = 'none';
      > }
      > }
      > //-->
      > </script>
      >
      > </body>
      >
      > </html>
      >
      >
      >
      > '************** **[/color]

      <html>
      <head>
      </head>

      <body onload="setVisi bility()">

      <form method="POST" action="userins ert.asp" name="Form1">
      <table border="0">
      <tr>
      <td nowrap class="labelhea der">Purchase Type:</td>
      <td nowrap class="labelhea der" valign="middle" >Use Credit Card: <input
      type="radio" value="0" onfocus="showpu rchase('purchas ing');return true;"
      name="chargetyp e">&nbsp;</td>
      <td nowrap class="labelhea der" valign="middle" >Use Purchase Orders:
      <input type="radio" name="chargetyp e" id="radioPurcha se"
      onfocus="hidepu rchase('purchas ing');return false;" checked></td>
      </tr>
      </table>
      <div id="purchasing " class="options" style="display: block; width: 377;
      height: 26">
      <table id="MyTable" border="0" width="39%">
      <tr>
      <td nowrap class="labelhea der">This line should hide if Purchase
      Order Selected</td>
      </tr>
      </table>
      </div>
      <table border="0" width="39%">
      <tr>
      <td width="39%" nowrap colspan="3"><in put type="submit" value="Save
      Details" name="btnSave" class="cmdflat" tabindex="24">
      <input type="reset" value="Reset" name="B2" class="cmdflat"
      tabindex="25"></td>
      <td width="63%" nowrap class="labelhea der">&nbsp;&nbs p; <b>Required
      Fields (*)</b></td>
      </tr>
      </table>
      </form>


      <script type="text/JavaScript">
      <!--
      function setVisibility()
      {
      var MyRadio = document.getEle mentById("radio Purchase")
      MyRadio.value=" 1";
      hidepurchase('p urchasing');
      }

      function showpurchase(th eTable)
      {
      if (document.getEl ementById(theTa ble).style.disp lay == 'none')
      {
      document.getEle mentById(theTab le).style.displ ay = 'block';
      }
      }

      function hidepurchase(th eTable)
      {
      if (document.getEl ementById(theTa ble).style.disp lay == 'none')
      {
      document.getEle mentById(theTab le).style.displ ay = 'none';
      }
      else
      {
      document.getEle mentById(theTab le).style.displ ay = 'none';
      }
      }
      //-->
      </script>

      </body>

      </html>


        Comment

        Previous template Next
        Working...