How to show form input fields based on select value

Question

I know this is simple  and I need to search in Google  I tried my best and I could not find a better solution  I have a form field  which takes some input and a select field  which has some values  It also has  Other  value    What I want is    If the user selects the  Other  option  a text field to specify that  Other  should be displayed  When a user selects another option  than  Other   I want to hide it again  How can I perform that using JQuery    This is my JSP code   lt label for  db  gt Choose type lt  label gt   lt select name  dbType  id dbType  gt      lt option gt Choose Database Type lt  option gt      lt option value  oracle  gt Oracle lt  option gt      lt option value  mssql  gt MS SQL lt  option gt      lt option value  mysql  gt MySQL lt  option gt      lt option value  other  gt Other lt  option gt   lt  select gt    lt div id  otherType  style  display none   gt     lt label for  specify  gt Specify lt  label gt     lt input type  text  name  specify  placeholder  Specify Databse Type   gt   lt  div gt    Now I want to show the DIV tag   id  otherType     only when the user selects Other  I want to try JQuery  This is the code I tried   lt script type  text javascript      src  jquery-ui-1 10 0 tests jquery-1 9 0 js  gt  lt  script gt   lt script src  jquery-ui-1 10 0 ui jquery-ui js  gt  lt  script gt   lt script gt          dbType   change function        selection      this   value       switch selection              case  other                  otherType   show               break         case  default                  otherType   hide               break            lt  script gt    But I am not able to get this  What should I do  Thanks

User · Answer

I got its answer  Here is my code   lt label for  db  gt Choose type lt  label gt   lt select name  dbType  id dbType  gt      lt option gt Choose Database Type lt  option gt      lt option value  oracle  gt Oracle lt  option gt      lt option value  mssql  gt MS SQL lt  option gt      lt option value  mysql  gt MySQL lt  option gt      lt option value  other  gt Other lt  option gt   lt  select gt    lt div id  other  class  selectDBType  style  display none   gt   lt label for  specify  gt Specify lt  label gt   lt input type  text  name  specify  placeholder  Specify Databse Type   gt   lt  div gt    And my script is    function                  dbType   change function                     selectDBType   slideUp  slow                          this  val    slideDown  slow

User · Answer

Demo on JSFiddle    document  ready function          toggleFields       call this first so we start out with the correct visibility depending on the selected form values        this will call our toggleFields function every time the selection value of our other field changes         dbType   change function              toggleFields                    this toggles the visibility of other server function toggleFields         if      dbType   val        other               otherServer   show        else             otherServer   hide        HTML        lt p gt Choose type lt  p gt       lt p gt Server           lt select id  dbType  name  dbType  gt             lt option gt Choose Database Type lt  option gt             lt option value  oracle  gt Oracle lt  option gt             lt option value  mssql  gt MS SQL lt  option gt             lt option value  mysql  gt MySQL lt  option gt             lt option value  other  gt Other lt  option gt           lt  select gt       lt  p gt       lt div id  otherServer  gt           lt p gt Server               lt input type  text  name  server name    gt           lt  p gt           lt p gt Port               lt input type  text  name  port no    gt           lt  p gt       lt  div gt       lt p align  center  gt           lt input type  submit  value  Submit     gt       lt  p gt

User · Answer

You have a few issues with your code     you are missing an open quote on the id of the select element  so   lt select name  dbType  id dbType  gt     should be  lt select name  dbType  id  dbType  gt       this   should be   this   there is no need for the quotes inside the paranthesis  use  val   instead of  value   when you want to retrieve the value of an option when u initialize  selection  do it with a var in front of it  unless you already have done it at the beggining of the function   try this          dbType   on  change  function            if    this  val      other                otherType   show                     else              otherType   hide                       http   jsfiddle net ks6cv   UPDATE for use with switch       dbType   on  change  function         var selection     this  val        switch selection       case  other           otherType   show      break      default          otherType   hide               UPDATE with links for jQuery and jQuery-UI    lt script src    ajax googleapis com ajax libs jquery 1 9 1 jquery min js   gt  lt  script gt   lt script src    ajax googleapis com ajax libs jqueryui 1 10 2 jquery-ui min js  gt  lt  script gt

User · Answer

lt  DOCTYPE html gt   lt html gt   lt head gt   lt script src  https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt    lt script gt  function myfun      document  ready function             select   click      function        var data     select   val                disp   val data                                   lt  script gt   lt  head gt   lt body gt    lt p gt id  lt input type  text  name  user  id  disp  gt  lt  p gt    lt select id  select  onclick  myfun    gt   lt option name  1 value  1  gt first lt  option gt   lt option name  2 value  2  gt second lt  option gt   lt  select gt    lt  body gt   lt  html gt

User · Answer

You have to use val   instead of value   and you have missed starting quote  id dbType  should be id  dbType   Live Demo  Change  selection      this   value      To  selection     this  val      or  selection   this value

User · Answer

dbType   change function        var selection     this  val       if selection     other                  otherType   show            else                otherType   hide

[javascript] How to show form input fields based on select value?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to jsp