How To Show And Hide Input Fields Based On Radio Button Selection

Question

Here is the code to show input fields depending on radio selection like  SCRIPT  lt script type  quot text javascript quot  gt   function yesnoCheck         if  document getElementById  yesCheck   checked            document getElementById  ifYes   style visibility    visible         else           document getElementById  ifYes   style visibility    hidden           lt  script gt   HTML Yes  lt input type  quot radio quot  onclick  quot javascript yesnoCheck    quot  name  quot yesno quot  id  quot yesCheck quot   gt No  lt input type  quot radio quot  onclick  quot javascript yesnoCheck    quot  name  quot yesno quot  id  quot noCheck quot   gt   lt br gt   lt div id  quot ifYes quot  style  quot visibility hidden quot  gt If yes  explain       lt input type  text  id  yes  name  yes   gt       lt br gt What can we do to accommodate you           lt input type  text  id  acc  name  acc   gt   lt  div gt     other 3  lt input type  text  id  other3  name  other3  gt   lt br gt      other 4  lt input type  text  id  other4  name  other4  gt   lt br gt   However I would like input fields to be hidden  like on the image   and make they do not use any space until radio button is selected  when radio is selected show them with fade effect    Here is the fiddle

User · Answer

You can do with Very Simple Step      radio id radio1    change function            yes   removeClass  none           no   addClass  none              radio id radio2    change function            no   removeClass  none           yes   addClass  none

User · Answer

lt script type  text javascript  gt  function Check         if  document getElementById  yesCheck   checked            document getElementById  ifYes   style display    block              else           document getElementById  ifYes   style display    none             lt  script gt   lt  head gt   lt body gt  Select os    lt br gt  Two  lt input type  radio  onclick  Check     value  Two  name  categor enter code here y  id  yesCheck   gt One  lt input type  radio  onclick  Check     value  One name  category   gt   lt br gt   lt div id  ifYes  style  display none   gt  Three lt input type  radio  name  win  value  Three   gt  Four lt input type  radio  name  win  value  Four   gt

User · Answer

Replace all instances of visibility style to display  display none   to hide display block   to show   Here s updated jsfiddle  http   jsfiddle net QAaHP 16   You can do it using Mootools or jQuery functions to slide up down but if you don t need animation effect it s probably too much for what you need   CSS display is a faster and simpler approach

User · Answer

Use display none block  instead of visibility  and add a margin-top bottom for the space you want to see ONLY when the inputs are shown   function yesnoCheck             if  document getElementById  yesCheck   checked               document getElementById  ifYes   style display    block             else              document getElementById  ifYes   style display    none                     and your HTML line for the ifYes tag   lt div id  ifYes  style  display none margin-top 3    gt If yes  explain

User · Answer

Using the visibility property only affects the visibility of the elements on the page  they will still be there in the page layout  To completely remove the elements from the page  use the display property    display none    for hiding display block    for showing   Make sure to change your css file to use display instead of visibility too   As for the javascript  this is not jQuery   make sure you hide the options by default when the page loads    lt script type  text javascript  gt      window onload   function             document getElementById  ifYes   style display    none              function yesnoCheck             if  document getElementById  yesCheck   checked                document getElementById  ifYes   style display    block                      else               document getElementById  ifYes   style display    none                     lt  script gt    If you haven t done so already  I would recommend taking a look at jQuery  jQuery code is much clearer and easier to write and understand   http   www w3schools com jquery default asp

User · Answer

This will work           lt  DOCTYPE html gt   lt html gt   lt head gt   lt script type  text javascript  gt   window onload   function         document getElementById  ifYes   style display    none       document getElementById  ifNo   style display    none     function yesnoCheck         if  document getElementById  yesCheck   checked            document getElementById  ifYes   style display    block           document getElementById  ifNo   style display    none           document getElementById  redhat1   style display    none           document getElementById  aix1   style display    none              else if document getElementById  noCheck   checked            document getElementById  ifNo   style display    block           document getElementById  ifYes   style display    none           document getElementById  redhat1   style display    none           document getElementById  aix1   style display    none          function yesnoCheck1        if document getElementById  redhat   checked           document getElementById  redhat1   style display    block          document getElementById  aix1   style display    none            if document getElementById  aix   checked           document getElementById  aix1   style display    block          document getElementById  redhat1   style display    none            lt  script gt   lt  head gt   lt body gt  Select os   lt br gt  windows  lt input type  radio  onclick  javascript yesnoCheck     name  yesno  id  yesCheck   gt Unix  lt input type  radio  onclick  javascript yesnoCheck     name  yesno  id  noCheck   gt   lt br gt   lt div id  ifYes  style  display none  gt  Windows 2008 lt input type  radio  name  win  value  2008   gt  Windows 2012 lt input type  radio  name  win  value  2012   gt   lt  div gt   lt div id  ifNo  style  display none  gt  Red Hat lt input type  radio  name  unix  onclick  javascript yesnoCheck1    value  2008    id  redhat   gt  AIX lt input type  radio  name  unix  onclick  javascript yesnoCheck1       value  2012  id  aix   gt   lt  div gt   lt div id  redhat1  style  display none  gt  Red Hat 6 0 lt input type  radio  name  redhat  value  2008  id  redhat6 0   gt  Red Hat 6 1 lt input type  radio  name  redhat  value  2012  id  redhat6 1   gt   lt  div gt   lt div id  aix1  style  display none  gt  aix 6 0 lt input type  radio  name  aix  value  2008  id  aix6 0   gt  aix 6 1 lt input type  radio  name  aix  value  2012  id  aix6 1    lt  div gt   lt  body gt    lt  html gt

User · Answer

Use display none to not show the items  then with JQuery you can use fadeIn   and fadeOut   to hide unhide the elements    http   www w3schools com jquery jquery fade asp

User · Answer

You ll need to also set the height of the element to 0 when it s hidden  I ran into this problem while using jQuery  my solution was to set the height and opacity to 0 when it s hidden  then change height to auto and opacity to 1 when it s un-hidden   I d recommend looking at jQuery  It s pretty easy to pick up and will allow you to do things like this a lot more easily       yesCheck   click function             ifYes   slideDown            noCheck   click function             ifYes   slideUp          It s slightly better for performance to change the CSS with jQuery and use CSS3 animations to do the dropdown  but that s also more complex  The example above should work  but I haven t tested it

[javascript] How To Show And Hide Input Fields Based On Radio Button Selection

Examples related to javascript

Examples related to jquery

Examples related to html