Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

Next challenges

Recent achievements

Recognition

  • Give kudos
  • My kudos

Leaderboard

  • Global

Trophy case

Kudos (beta program)

Kudos logo

You've been invited into the Kudos (beta program) private group. Chat with others in the program, or give feedback to Atlassian.

View group

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Need to hide/show a textfield based on the value of the check box using Javascript?

Hi

I need to hide/show a textfield based on the value of the check box using Javascript?

JIRA VERSION 5.2.1

Emergency Implementation- multicheckboxes- customfield_11705

Reason- textfield 255 charcters- customfield_11704

For eg.

Emergency Implementation?

[x] No (<-Defualt value)

[ ] Yes

If Yes, display below text field?

Reason:

Has anyone done this successful without Javascript? or is Javascript methods the best solution?

I have tried to follow this guide, but no success:

https://answers.atlassian.com/questions/39876/jira-set-a-field-based-on-another-field

Test1 - (Not working)

<script type="text/javascript">

var toggleMyField = function (field) {

jQuery("#customfield_11704").toggle(field.is(':checked'));

}

toggleMyField(jQuery("#customfield_11705"));

jQuery("#customfield_11705").click(function () {

toggleMyField($(this));

});

</script>

Test2 -(Not working)

<script type="text/javascript">

multicheckbox = document.getElementById('customfield_10000');

if (multicheckbox) {

text_field = document.getElementById('customfield_10001FieldArea');

text_field.style.display='none';

multicheckbox.onchange=function() {

if (this.value) {

text_field.style.display='';

} else {

text_field.style.display='none';

}

}

}

</script>

Test3 - (Not working)

<script type="text/javascript">

checkbox = document.getElementById('customfield_11705');

if (checkbox) {

target = document.getElementById('customfield_11704');

if (checkbox.value != Yes) target.style.display='none';

checkbox.onchange=function() {

if (this.value == Yes) {

target.style.display = '';

target.value="enter message here";

} else {

target.style.display='none';

}

}

}

</script>

Test4 - (Not working)

<script type="text/javascript">

(function($) {

AJS.toInit(function(){

checkbox = document.getElementById('customfield_11705');

if (checkbox) {

target = document.getElementById('customfield_11704');

if (checkbox.value != Yes) target.style.display='none';

});

JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e, context) {

checkbox.onchange=function() {

if (this.value == Yes) {

target.style.display = '';

target.value="enter message here";

} else {

target.style.display='none';

});

})(AJS.$);

</script>

Test5 - (Not working)

<script type="text/javascript">

if( AJS.$("#customfield_11705-1").attr('checked'))

{ AJS.$(":input[name='customfield_11704']").closest('fieldset.group').show();

}

else

{ AJS.$(":input[name='customfield_11704']").closest('fieldset.group').hide();

}

AJS.$("#customfield_11705-1").click(function(){

if( AJS.$("#customfield_11705-1").attr('checked'))

{ AJS.$(":input[name='customfield_11704']").closest('fieldset.group').show();

}

else

{ AJS.$(":input[name='customfield_11704']").closest('fieldset.group').hide();

}

});

AJS.$("#customfield_11705-1").click(function(){

if( AJS.$("#customfield_11705-1").attr('checked'))

{ AJS.$(":input[name='customfield_11704']").closest('fieldset.group').show();

}

else

{ AJS.$(":input[name='customfield_11704']").closest('fieldset.group').hide();

}

});

</script>

I Insert all of my above attempts in the "Description" field for the "Emergency Implementation - multicheckboxes - customfield_11705"

7 answers

1 accepted

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

2 votes
Answer accepted

this is simple, try with the following code and check custom field id's before deploying

&lt;script type="text/javascript"&gt;  
jQuery(document).ready(function($) {	
JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e, context) {	
	callHideShowFunction();
});
callHideShowFunction();
function  callHideShowFunction(){
		showHideReason();
		$("#customfield_11704").closest('div.field-group').hide();	
		$('input:radio[name=customfield_11911]').click(function() {	
			showHideReason();
		});
}
	function showHideReason(){			
		var emergencyImpl=$('input[name=customfield_11911]:checked + label').text();
	
		if( emergencyImpl == "Yes" ){ 
			$("#customfield_11704").closest('div.field-group').show();
		}else {
			$('#customfield_11704').val('');
			$("#customfield_11704").closest('div.field-group').hide();
		}
	}
});
&lt;/script&gt;

Edit***

It's working now, Thank you so much for your assistance!

What would I have to add in to make "Reason" Required/Manditory once it is visable by selecting emergencyImpl == "This is an emergency implemetation"?

I have the Jira Version 6.1.2, and I cant to work this code. Could you help me? thank you!

Anyone care to help on this?

This relates to another question I asked: https://answers.atlassian.com/questions/147850/how-to-make-a-text-field-required-once-a-checkbox-is-checked

Please someone give me some guidence?

Can anyone assist? Is there perhaps a mis-understanding?

it should work

&lt;script type="text/javascript"&gt;  
jQuery(document).ready(function($) {
	JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e,context) {
		checkBoxFunction();
	});
	checkBoxFunction();
	
function checkBoxFunction(){				
			showorhidefields(); 
			//assume 4 checkbox there with name  'customfield_11705'
		$("#customfield_11705-1,#customfield_11705-2").click(function() {
			showorhidefields(); 
		});	
	
		
	}
function showorhidefields(){
	alert("inside function");
	var checkedCheckboxes = $("input:checkbox[name=customfield_11705]:checked");		
			$("#customfield_11704").closest('div.field-group').hide();		
		checkedCheckboxes.each(function () {
				var selVal=$(this).next("label").text();
				alert("selVal: "+selVal);				
				if(selVal == 'Yes'){					
					$("#customfield_11704").closest('div.field-group').show();	
				}else {
					$('#customfield_11704').val('');
					$("#customfield_11704").closest('div.field-group').hide();
				}				
				
			});
		}	
		

	});
&lt;/script&gt;

it is working for me

I'll give this a try, Thanks

Ok so this didn't work, It for some reason effected the custom fields page in admin mode by cutting off everything below "Emergency Implementation" customfield and did not effect the issue create screen at all? Do you know why?

where you have added the above script?

check the error message by using firebug in Firefox

add the above script in textbox custom field desctioption in field configuration of that issue type on which you are testing

I put it in the check box custom field description, will add it the the textbox "Reason" customfield and get back to you?

Can you elaborate on:

// add 'Yes' option id here

I put it in the check box custom field description, will add it the the textbox "Reason" customfield and get back to you?

Can you elaborate on:

// add 'Yes' option id here

ok new evidence,

</script"> the " was causing the page cutting off problem

Ok so no errors, If i uses this code:

Nothing changes on the "Create issue screen"

I have customfield - "Emergency Implementation", with 2 options (YES,NO)

Directly beneth it is the customfield - "Reason", which is the textbox

If i tick(Check) either box YES or NO, Nothing changes - the "Reason" textbox is always visable?

can you confirm that you have added the script in field description in fieldconfiguration scheme?

i have update my answer pls try with that and let me know if it works for you!!

and also let me know whether alert message are getting ?

This is the code i used:

&lt;script type="text/javascript"&gt;  
jQuery(document).ready(function($) {
    JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e,context) {
        checkBoxFunction();
    });
    checkBoxFunction();
     
function checkBoxFunction(){                
            showorhidefields(); 
            //assume 4 checkbox there with name  'customfield_11705'
        $("#customfield_11705-1,#customfield_11705-2").click(function() {
            showorhidefields(); 
        }); 
     
         
    }
function showorhidefields(){
    alert("inside function");
    var checkedCheckboxes = $("input:checkbox[name=customfield_11705]:checked");        
            $("#customfield_11704").closest('div.field-group').hide();      
        checkedCheckboxes.each(function () {
                var selVal=$(this).next("label").text();
                alert("selVal: "+selVal);               
                if(selVal == 'YES'){                   
                    $("#customfield_11704").closest('div.field-group').show();  
                }else {
                    $('#customfield_11704').val('');
                    $("#customfield_11704").closest('div.field-group').hide();
                }               
                 
            });
        }   
         
 
    });
&lt;/script&gt;

Nothing happens on create issue screen and the code is in the right place.

Here's an image: http://imgur.com/Uc2GAtt

the code is looking good, i am not sure why it is not working :( and it is working on our instance.

is it giving first alert atleast?

try to load the Javascript as web resource module in plugin, check here how to do it here

https://answers.atlassian.com/questions/47843/strange-javascript-problem-in-create-screen

i will suggest to use "Emergency Implementation" field type as radio button because user should able to select only one option eaither Yes or No.

what do you say?

I currently don't have access the the server, we are hosting on linux jira 5.2.1 download.

Can we try this perhaps?

I will recreate custom fields

"Emergency Implementation" - With only one checkbox (multiple checkboxes)

("This is an emergency implemetation"-> unchecked)

"Emergency Implementation" = customfield_11909

&

"Reason" - Text box (<255 characters)

"Reason" = customfield_11910

Can we try a code where the "Reason" is either hidden or optional until "Emergency Implementation" than it's either becomes visable or required on the checkbox getting checked?

{"id":"customfield_11909","name":"Emergency Implementation","custom":true,"orderable":true,"navigable":true,"searchable":true,"schema":{"type":"array","items":"string","custom":"com.atlassian.jira.plugin.system.customfieldtypes:multicheckboxes","customId":11909}}

{"id":"customfield_11910","name":"Reason","custom":true,"orderable":true,"navigable":true,"searchable":true,"schema":{"type":"string","custom":"com.atlassian.jira.plugin.system.customfieldtypes:textfield","customId":11910}}

Yes that is fine.

"Emergency Implementation" - Radio button = customfield_11911
Options = "None" and "This is an emergency implemetation"

Would that be correct?

I put it in the check box custom field description, will add it the the textbox "Reason" customfield and get back to you?

Can you elaborate on:

// add 'Yes' option id here

ok, change the 21 and 22 lines as it to below

var selVal=$(this).text();          
                if(selVal == 'Yes'){

Ok So I made the changes to lines 21 & 22, I gave the options YES and NO to the checkbox on "Emergency Implementation" added the altered code in the description of the textbox for "Reason" and it did the same thing, No changes/works on the create issue screen, no errors , Just on the custom fields page where you make changes to the custom fields the where i put the code in on the "reason" customfield text box description it cuts the rest of the page off??? not sure exactly why this is happening, but no errors as i say?

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

TAGS
Community showcase
Published in Confluence Cloud

Share your Confluence Cloud experience for a chance to win $500!

Take our 5-minute survey to win a $500 Visa gift card! Are you currently using Confluence Cloud? We want to hear from you! Fill out this quick survey about your Confluence Cloud experience so we ...

260 views 5 13
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you