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

by

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>

More Related Contents:

  1. How can I use delay() with show() and hide() in Jquery
  2. Switch classes on click of button
  3. How can I modify with css an image appended with javascript?
  4. How to get children id when I click the parent?
  5. Java script on focus instead of onclick
  6. Scroll Function working in reverse order [closed]
  7. HTML text input allow only numeric input
  8. How to send FormData objects with Ajax-requests in jQuery? [duplicate]
  9. Using jQuery to center a DIV on the screen
  10. How can I change an element’s text without changing its child elements?
  11. horizontal scrollbar on top and bottom of table
  12. Persisting the changes of range objects after selection in HTML
  13. Set custom HTML5 required field validation message
  14. How to pass parameters on onChange of html select
  15. Show and hide divs at a specific time interval using jQuery
  16. How do I detect “shift+enter” and generate a new line in Textarea?
  17. Adding additional data to select options using jQuery
  18. HTML5 dragleave fired when hovering a child element
  19. HTML5 Local Storage fallback solutions [closed]
  20. jQuery $(“#radioButton”).change(…) not firing during de-selection
  21. :touch CSS pseudo-class or something similar?
  22. Open a new javascript window(.open) along with its CSS styling
  23. Multiple Select limit number of selection
  24. Search and Highlight in jQuery
  25. Is it possible to add html inside a title attribute?
  26. Trigger standard HTML validation (form) without using submit button? [duplicate]
  27. How do I detect the inherited background-color of an element using jQuery/JS?
  28. how to use jQuery ajax calls with node.js
  29. Remove ‘All Files’ option from HTML file input
  30. How to keep elements non-refreshed

Leave a Comment