CODEWITHSUNDEEP
javascripthtmljquery
Jack Yuan
Jack Yuan

Reputation: 51

How to have text fields hidden by default on page load until the relevant drop down option has been selected?

How to keep text fields to stay hidden by default when the page is loaded? But, show up when a relevant drop down option is selected. The javascript works to some extent. But, I want to keep the input fields hidden initially.

 <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>

            </table>
           </form>
         </body>

Upvotes: 0

Views: 222

Answers (1)

Mamun
Mamun

Reputation: 68933

You can use CSS to hide the elements:

#designation, #lavel-one, #organization, #lavel-two{
  display: none;
}

I think you should also hide the elements when val=='0'.

#designation, #lavel-one, #organization, #lavel-two{
  display: none;
}
<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');
      console.log(val);
      if(val=='Trainee' || val=='0')
      {
          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>

  </table>
 </form>
</body>

Upvotes: 1

Related Questions