In my form, the first field is a dropdown with options such as "student" and "employee". Below that, there are two text fields for "college name" and "company name". If a person selects "student", then the "college name" text box should be enabled and the "company name" text box should be disabled. If a person selects "employee", then the "company name" field should be enabled and the "college name" field should be disabled. The cursor focus should automatically move to a particular field based on the user's selection of the dropdown (for example, upon selecting "student", the "company" field should be disabled and the cursor focus should point to the "college" field, and vice versa). How can I achieve this?
<div class="container">
<div class="row main">
<div class="panel-heading">
<div class="panel-title text-center">
<h1 class="title">Company Name</h1>
<hr />
</div>
</div>
<div class="main-login main-center">
<form class="form-horizontal" method="post" action="#">
<div class="form-group">
<label for="name" class="cols-sm-2 control-label">I am a</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
<select name="cars">
<option value="volvo">Student</option>
<option value="saab">Employee</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="email" class="cols-sm-2 control-label">College Name</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="email" id="email" placeholder="Enter your Email"/>
</div>
</div>
</div>
<div class="form-group">
<label for="username" class="cols-sm-2 control-label">Company Name</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-users fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="username" id="username" placeholder="Enter your Username"/>
</div>
</div>
</div>
<div class="form-group ">
<button type="submit" class="btn btn-primary btn-lg btn-block login-button">Register</button>
</div>
<div class="login-register">
<a href="index.php">Login</a>
</div>
</form>
</div>
</div>
</div>