making fields show or stay hidden based on radio button group choice

[Andy Keyworth]

Hi,

I've been tasked with making certain custom fields show up or hide, based on a previous selection in a radio button group. Essentially, if radio button A is chosen, custom fields 1 and 2 must appear, and 3 should stay hidden; if radio button B is chosen, only customer field 3 should appear. 

The problem is, nothing I do produces any effect- it doesn't even cause a useful mistake which I could employ to figure out why it doesn't work.

Based on existing posts here in the Answers, I embedded the following JavaScript code into the Description field of the custom field for the radio button group:

<script type="text/javascript">

// for both options of Price Type (the radio button group)

  pricetype1 = document.getElementById('customfield_18506-1');

  pricetype2 = document.getElementById('customfield_18506-2');

// the target fields to appear or be hidden

  target1 = document.getElementById('customfield_18507');

  target2 = document.getElementById('customfield_18508');

  target3 = document.getElementById('customfield_18509');

// Hide relevant target fields if the selected price type isn't the appropriate type

      if (pricetype1.checked == false) target1.style.display='none';

      if (pricetype1.checked == false) target2.style.display='none';

      if (pricetype2.checked == false) target3.style.display='none';

      pricetype1.onchange=function() {

          if (pricetype1.checked ==  true) {             

                     target1.style.display = '';

                     target1.value="enter message here";

                     target2.style.display = '';

                     target2.value="enter message here";

         target3.style.display='none';

                  } else {

                 target1.style.display='none';

     target2.style.display='none';

          }

      pricetype2.onchange=function() {

          if (pricetype2.checked ==  true) {             

                     target3.style.display = '';

                     target3.value="enter message here";

         target1.style.display='none';

         target2.style.display='none';

                  } else {

                 target3.style.display='none';

          }

  }

 </script>

[Gab Bautista]

I will not use a 'java script in the description', but instead go with the native "Cascading Select" custom field in JIRA.

[Andy Keyworth]

Thank you- this WOULD be a good solution, unfortunately our requirements include that we use other form fields, including a multi-line text field. This multi-line field is called when a particular radio button is checked. I did not include that useful detail in my earlier description.

[Andy Keyworth]

I've also tried posting the following code into the target fields' Description, instead of the radio button's Description. Regardless, nothing seems to work.

<script type="text/javascript">

// for both options of Price Type

  pricetype1 = document.getElementById('customfield_18506-1');

  pricetype2 = document.getElementById('customfield_18506-2');

  target1 = document.getElementById('customfield_18507');

  target2 = document.getElementById('customfield_18508');

  target3 = document.getElementById('customfield_18509');

      // Hide the target field if pricetype isn't "List price"

      if (pricetype1.checked) target3.style.display='none';

      if (pricetype2.checked) target1.style.display='none';

      if (pricetype2.checked) target2.style.display='none';

      pricetype1.onchange=function() {

          if (pricetype1.checked) {             

                     target1.style.display = '';

                     target2.style.display = '';

         target3.style.display='none';

                  } else {

                 target1.style.display='none';

     target2.style.display='none';

          }

      pricetype2.onchange=function() {

          if (pricetype2.checked) {             

                     target3.style.display = '';

         target1.style.display='none';

         target2.style.display='none';

                  } else {

                 target3.style.display='none';

          }

  }

 </script>