How to hide or unhide table rows containing form fields in a php website based on a drop down selection using jquery/ ajax?

How to hide or unhide table rows containing form fields in a php website based on a drop down selection using jquery/ ajax? I am stuck on this. I used the script below but, it only hides the field leaving blank rows between the form fields. So, is there a way to also hide the respective table rows.

Thank you.

my code:

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    
    <script language="javascript" type="text/javascript">
    function toggleMe(val) 
    {
        var designation = document.getElementById('designation');
        var organization = document.getElementById('organization');
        if(val=='Trainee')
        {
            designation.style.display = "none";
            organization.style.display = "none";
        }
        else
        {
            designation.style.display = "block";
            organization.style.display = "block";
        }
    }
    </script>
    </head>
    
    <body>
    <form>
    <table width="100%" border="0">
      <tr>
        <td><select name="select" onchange="toggleMe(this.value)">
          <option value="0">Select any one</option>
          <option value="Trainee">Trainee</option>
          <option value="Product">Product</option>
        </select></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>Enter Designation</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td><input name="designation" type="text" id="designation" /></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>Enter Organization</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td><input name="organization" type="text" id="organization" /></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    </form>
    </body>
    </html>

Answer

Try like 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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    
    <script language="javascript" type="text/javascript">
    function toggleMe(val) 
    {
        var designation = document.getElementById('designation');
        var organization = document.getElementById('organization');
        var lavelOne = document.getElementById('lavel-one');
        var lavelTwo = document.getElementById('lavel-two');
        if(val=='Trainee')
        {
            designation.style.display = "none";
            organization.style.display = "none";
            lavelOne.style.display = "none";
            lavelTwo.style.display = "none";
        }
        else
        {
            designation.style.display = "block";
            organization.style.display = "block";
            lavelOne.style.display = "block";
            lavelTwo.style.display = "block";
        }
    }
    </script>
    </head>
    
    <body>
    <form>
    <table width="100%" border="0">
      <tr>
        <td><select name="select" onchange="toggleMe(this.value)">
          <option value="0">Select any one</option>
          <option value="Trainee">Trainee</option>
          <option value="Product">Product</option>
        </select></td>
        <td>&nbsp;</td>
      </tr>
        <tr id="lavel-one">
          <td>Enter Designation</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td><input name="designation" type="text" id="designation" /></td>
          <td>&nbsp;</td>
        </tr>
        <tr id="lavel-two">
          <td>Enter Organization</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td><input name="organization" type="text" id="organization" /></td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
    </table>
    </form>
    </body>
    </html>

Leave a Reply

Your email address will not be published. Required fields are marked *