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 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2010
    Posts
    22
    Thanks
    3
    Thanked 0 Times in 0 Posts

    To hide the other form when a radiobutton is clicked.

    Hi All,

    I dont know how to display a HTML form when user click on a radio button. I have two forms in a page, when user click on a radio button that correspond to its form, the other form will be hidden. I have the idea to use if...else statement. But I dont know what code to be inserted in an onClick event. I also not sure whether this is logic or not, whether this can be done or not. Pls help me how to accomplish this. I attach the sample of my code here. Thanks in advance.
    Code:
    <html>
    <head>
    <script type="text/javascript" src="funIndex.js">   
    </script> 
    </head>
    
    <body>
    <h4>CPI</h4>
    
    <!--Choose Single or Multiple Series-->
    <form name="choose" action="main.html" method="post">
    <input type="radio" name="series" value="single" onClick="what code to insert here"/> Single Serie <br/>
    <input type="radio" name="series" value="multiple" onClick="what code to insert here" /> Multiple Series <br/>
    </form>
    
    <!--To calculate Single Serie-->
    <script type="text/javascript">
    if (document.choose.name.value == "single")
    {
    </script>
    <form name="cpi">
    <table border="1">
    <tr>
      <td colspan="2">Single</td>
    </tr>
    <tr>
      <td>Country</td>
      <td><select name="country">
    	<option value="Malaysia">Malaysia</option>
    	<option value="Thailand">Thailand</option>
    	<option value="Singapore">Singapore</option>
    	<option value="Indonesia">Indonesia</option>
    	</select>
      </td>
    </tr>
    <tr>
      <td>Current</td>
      <td><select name="current" >
    	<option value="1960">1960</option>
    	<option value="1961">1961</option>
    	<option value="1962">1962</option>
    	<option value="1963">1963</option>
    	</select>
      </td>
    </tr>
    <tr>
      <td>Base</td>
      <td><select name="base">
    	<option value="1960">1960</option>
    	<option value="1961">1961</option>
    	<option value="1962">1962</option>
    	<option value="1963">1963</option>
    	</select>
      </td>
    </tr>
    <tr>
      <td><input type="button" value="Enter" onclick="calIndex(document.cpi.current.options.selectedIndex,document.cpi.base.options.selectedIndex)">
      </td>
    </tr>
    <tr>
      <td>Index</td>
      <td><input type="text" name="idx" id="idx2" /></td>
    </tr>
    </table>
    </form>
    
    <!--To calculate multiple series-->
    <script type="text/javascript">
    }
    else if (document.choose.name.value == "multiple")
    {
    </script>
    
    <form name="cpi2">
    <table border="1">
    <tr>
      <td colspan="2">Multiple</td>
    </tr>
    <tr>
      <td>Country</td>
      <td><select name="country">
    	<option value="Malaysia">Malaysia</option>
    	<option value="Thailand">Thailand</option>
    	<option value="Singapore">Singapore</option>
    	<option value="Indonesia">Indonesia</option>
    	</select>
      </td>
    </tr>
    <tr>
      <td>Current From</td>
      <td><select name="current" >
    	<option value="1960">1960</option>
    	<option value="1961">1961</option>
    	<option value="1962">1962</option>
    	<option value="1963">1963</option>
    	</select>
      </td>
    </tr>
    <tr>
      <td>Current To</td>
      <td><select name="current" >
    	<option value="1960">1960</option>
    	<option value="1961">1961</option>
    	<option value="1962">1962</option>
    	<option value="1963">1963</option>
    	</select>
      </td>
    </tr>
    <tr>
      <td>Base</td>
      <td><select name="base">
    	<option value="1960">1960</option>
    	<option value="1961">1961</option>
    	<option value="1962">1962</option>
    	<option value="1963">1963</option>
    	</select>
      </td>
    </tr>
    <tr>
      <td><input type="button" value="Enter" >
      </td>
    </tr>
    </table>
    </form>
    <script type="text/javascript">
    }
    </script>
    
    
    </body>
    </html>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Code:
    <head>
    <script type="text/javascript">
    function whichForm( which )
    {
        document.getElementById("single").style.display = ( which == "single") ? "block" : "none";
        document.getElementById("multiple").style.display = ( which == "multiple") ? "block" : "none";
    }
    </script>
    </head>
    <body>
    ...
    <form><!-- no need for name, action, or method for this form! -->
    <input type="radio" name="series" onClick="whichForm('single');"/> Single Series <br/>
    <input type="radio" name="series" onClick="whichForm('multiple');" /> Multiple Series </form>
    <br/>
    ...
    <div id="single" style="display: none;">
    ... code for your "single" form .. 
    </div>
    <div id="multiple" style="display: none;">
    ... code for your "multiple" form .. 
    </div>
    ...
    </body>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    azrina (08-01-2010)

  • #3
    New Coder
    Join Date
    Jul 2010
    Posts
    22
    Thanks
    3
    Thanked 0 Times in 0 Posts

    [RESOLVED]To hide the other form when a radiobutton is clicked.

    Thank You! It works!


  •  

    Posting Permissions

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