Question

I am creating one form in html using table. Which have one Drop down box contains two values 1. Professor, 2. Librarian. Now each values have different form fields. If I select Professor some different fields show be displayed and if I select Librarian some different fields display.

Can anybody tell me how I can do this??

<table width="435" border="0"> 
  <tr> <td>VIsit Date </td> <td><input type="text" name="textfield" /></td></tr> 
  <tr> <td>Last Visit Date </td> <td><input type="text" name="textfield2" /></td></tr> <tr> <td>Call Type </td> 
         <td>
           <select name="title" size="1"> 
             <option value ="Pro"> Professor </option>
             <option value ="Lib"> Librarian </option> </select>
         </td>
  </tr>
</table>

Answer 1

Here’s how to do it in jquery, forget normal javascript.

JQUERY CODE (PUT THIS IN THE HEAD PART)

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js></script>
<script>
    $("#YOUR_SPECIFIC_ID").change(function(){
          if ($(this).val() == "Option2") {
                $('.option1form').hide('');
                $('.option2form').show('');
          }});
         </script>
         <script>
             $("#YOUR_SPECIFIC_ID").change(function(){
         if ($(this).val() == "Option1") {
                            $('.option1form').show('');
                $('.option2form').hide('');}});

</script>

Assign the select field an id:

<select name="asia" style="width:233px;" id="YOUR_SPECIFIC_ID">
    <option value="Option1">Option1</option>
    <option value="Option2">Option2</option>
    </select>

Then, you need to make the different forms for different selections.
like this.

<div class="option1form" style="display:none">
<input type="text" name="example1_1">
<input type="text" name="example1_2">
</div>

<div class="option2form" style="display:none">
<input type="text" name="example2_1">
<input type="text" name="example2_2">
</div>

Should work like this.