javascript - How to hide html items with a radio button -
this beginner html/css/javascript question. i've been beating head against wall, still can't figure out. have simple web form users fill out(name, email, etc) , way it's supposed work when user clicks radio button says "yes" see drop down menu set number of items , when click "no" see text field. have part working correctly, want drop down menu , text field start hidden, , appear when yes or no radio button clicked. i've tried style = display:hidden; when used text , drop-down menu wouldn't appear anymore.
thanks answers!
this code i'm using:
<tr align="left" valign="middle"> <td colspan="1" rowspan="1"> <p> </p> </td> <td colspan="1" rowspan="1"> <p><b><font color="#cc0000" face="georgia, times new roman, times, serif" size="+2">*</font></b></p> </td> <td colspan="1" rowspan="1"> <p>do own zaxwerks product?</p> </td> <td colspan="1" rowspan="1"> <p><input id="customer" name="status" onclick="javascript: test();" type="radio" value="existing customer" /> yes<br /> <input id="demo" name="status" onclick="javascript: test();" type="radio" value="downloaded demo" /> no</p> </td> <script type="text/javascript"> function test() { if (document.getelementbyid('customer').checked) { //show document.getelementbyid('show_customer').style.display = 'block'; document.getelementbyid('show_customer2').style.display = 'block'; document.getelementbyid('show_customer3').style.display = 'block'; document.getelementbyid('show_customer4').style.display = 'block'; //hide document.getelementbyid('show_demo').style.display = 'none'; document.getelementbyid('show_demo2').style.display = 'none'; document.getelementbyid('show_demo3').style.display = 'none'; } else { //show document.getelementbyid('show_demo').style.display = 'block'; document.getelementbyid('show_demo2').style.display = 'block'; document.getelementbyid('show_demo3').style.display = 'block'; //hide document.getelementbyid('show_customer').style.display = 'none'; document.getelementbyid('show_customer2').style.display = 'none'; document.getelementbyid('show_customer3').style.display = 'none'; document.getelementbyid('show_customer4').style.display = 'none'; } } </script> <td> </td> </tr> <tr> <td colspan="1" rowspan="1" style="display: none;"> <p> </p> </td> <td colspan="1" rowspan="1" style="display: none;"> <div id="show_customer"> <p><b><font color="#cc0000" face="georgia, times new roman, times, serif" size="+2">*</font></b></p> </div> <div id="show_demo" style="display: none;"> <p><b><font color="#cc0000" face="georgia, times new roman, times, serif" size="+2">*</font></b></p> </div> </td> <td colspan="1" rowspan="1" style="display: none;"> <div id="show_customer2"> <p>product owned:</p> </div> <div id="show_demo2" > <p>where did hear us?:</p> </div> </td> <!--this user selects product own. (in following code: value equals "what appears in log file" appears in site menu)--> <td colspan="1" rowspan="1"> <div id="show_customer3" style="display: none;"> <p><select id="what" name="what" size="1"> <option selected="selected" value="">select one</option> <option value="item 1">item 1</option> <option value="item 2">item 2</option> <option value="item 3">item 3</option> <option value="item 4">item 4</option> <option value="item 5">item 5</option> <option value="item 6">item 6</option> <option value="item 7">item 8</option> <option value="item 9">item 9</option> <option value="item 10">item 10</option> <option value="item 11">item 11</option> <option value="item 12">item 12</option> </select></p> </div> <div id="show_demo3" style="display: none;"> <p> <input maxlength="64" name="where" size="30" type="text" value="" /> </p> </div> </td> <td> </td> </tr>
use same display:none use in other places in code. these lines
<div id="show_customer2" style="display: none;"> <p>product owned:</p> </div> <div id="show_demo2" style="display: none;"> <p>where did hear us?:</p> </div> here working example:
<tr align="left" valign="middle"> <td colspan="1" rowspan="1"> <p> </p> </td> <td colspan="1" rowspan="1"> <p><b><font color="#cc0000" face="georgia, times new roman, times, serif" size="+2">*</font></b></p> </td> <td colspan="1" rowspan="1"> <p>do own zaxwerks product?</p> </td> <td colspan="1" rowspan="1"> <p><input id="customer" name="status" onclick="javascript: test();" type="radio" value="existing customer" /> yes<br /> <input id="demo" name="status" onclick="javascript: test();" type="radio" value="downloaded demo" /> no</p> </td> <script type="text/javascript"> function test() { if (document.getelementbyid('customer').checked) { //show document.getelementbyid('show_customer').style.display = 'block'; document.getelementbyid('show_customer2').style.display = 'block'; document.getelementbyid('show_customer3').style.display = 'block'; document.getelementbyid('show_customer4').style.display = 'block'; //hide document.getelementbyid('show_demo').style.display = 'none'; document.getelementbyid('show_demo2').style.display = 'none'; document.getelementbyid('show_demo3').style.display = 'none'; } else { //show document.getelementbyid('show_demo').style.display = 'block'; document.getelementbyid('show_demo2').style.display = 'block'; document.getelementbyid('show_demo3').style.display = 'block'; //hide document.getelementbyid('show_customer').style.display = 'none'; document.getelementbyid('show_customer2').style.display = 'none'; document.getelementbyid('show_customer3').style.display = 'none'; document.getelementbyid('show_customer4').style.display = 'none'; } } </script> <td> </td> </tr> <tr> <td colspan="1" rowspan="1" style="display: none;"> <p> </p> </td> <td colspan="1" rowspan="1" style="display: none;"> <div id="show_customer"> <p><b><font color="#cc0000" face="georgia, times new roman, times, serif" size="+2">*</font></b></p> </div> <div id="show_demo" style="display: none;"> <p><b><font color="#cc0000" face="georgia, times new roman, times, serif" size="+2">*</font></b></p> </div> </td> <td colspan="1" rowspan="1" style="display: none;"> <div id="show_customer2" style="display: none;"> <p>product owned:</p> </div> <div id="show_demo2" style="display: none;"> <p>where did hear us?:</p> </div> </td> <!--this user selects product own. (in following code: value equals "what appears in log file" appears in site menu)--> <td colspan="1" rowspan="1"> <div id="show_customer3" style="display: none;"> <p><select id="what" name="what" size="1"> <option selected="selected" value="">select one</option> <option value="item 1">item 1</option> <option value="item 2">item 2</option> <option value="item 3">item 3</option> <option value="item 4">item 4</option> <option value="item 5">item 5</option> <option value="item 6">item 6</option> </select></p> </div> <div id="show_demo3" style="display: none;"> <p> <input maxlength="64" name="where" size="30" type="text" value="" /> </p> </div> </td> <td> </td> </tr>
Comments
Post a Comment