Two main issues with your original code:
1- Using a wrong selector for the onchange
event, replace "Other"
by "#title"
2- You were checking if the value is equal to "Other"
instead of the "other"
you have in your HTML. Be careful, string comparison is case-sensitive!
Below is a working snippet after applying these two changes:
$(document).ready(function(){
$('form:first *:input[type!=hidden]:first').focus();
$("#title").change(function(){
if($(this).val() == "other") {
$("#other-title").show();
}
else {
$("#other-title").hide();
}
});
$("#other-title").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset>
<legend>Basic Info</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="user-name">
<label for="mail">Email:</label>
<input type="email" id="mail" name="user-email">
<label for="title">Job Role</label>
<select id="title" name="user-title">
<option value="full-stack js developer">Full Stack JavaScript Developer</option>
<option value="front-end developer">Front End Developer</option>
<option value="back-end developer">Back End Developer</option>
<option value="designer">Designer</option>
<option value="student">Student</option>
<option value="other">Other</option>
</select>
<input type="text" id="other-title" placeholder="Your Job Role">
</fieldset>
solved PLEASE assist me.. RE: *FORM FIELDS* I want to Hide() my “type=text box” until the Other option is chosen in the dropdown option