PLEASE assist me.. RE: *FORM FIELDS* I want to Hide() my "type=text box" until the Other option is chosen in the dropdown option

Question

**HTML**   
```<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>```

I AM ATTEMPTING TO:
DONE //Prevent any JQuery code from running before the document is finished loading DONE //focus 1st field by default

THIS IS MY ISSUE: //Hide text box until "other" is chosen from the Job Role//

**JS**
```$(document).ready(function(){
    $('form:first *:input[type!=hidden]:first').focus();
    $("Other").change(function(){
        if($(this).val() == "Other")
    {
        $("#other-title").show();
    }
    else
    {
        $("#other-title").hide();
    }
        });
                  $("#other-title").hide();
}); ```

Answer 1

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>