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

[Warren McInnes]

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"

[RambanamP · Accepted solution]

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

<script type="text/javascript">  
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();
		}
	}
});
</script>

[Warren McInnes]

Edit***

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

[Warren McInnes]

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

[RambanamP]

i have added answers on

https://answers.atlassian.com/questions/147850/how-to-make-a-text-field-required-once-a-checkbox-is-checked?page=1#193199

[Cristian _Southend_]

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

[Warren McInnes]

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?

[Warren McInnes]

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

[RambanamP]

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

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

[RambanamP]

it should work

<script type="text/javascript">  
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();
				}				
				
			});
		}	
		

	});
</script>

it is working for me

[Warren McInnes]

I'll give this a try, Thanks

[Warren McInnes]

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?

[RambanamP]

where you have added the above script?

check the error message by using firebug in Firefox

[RambanamP]

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

[Warren McInnes]

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

[Warren McInnes]

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

[Warren McInnes]

ok new evidence,

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

[Warren McInnes]

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?

[RambanamP]

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

[Warren McInnes]

Yes i have?

[RambanamP]

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 ?

[Warren McInnes]

This is the code i used:

<script type="text/javascript">  
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();
                }               
                 
            });
        }   
         
 
    });
</script>

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

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

[RambanamP]

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

[RambanamP]

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?

[Warren McInnes]

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}}

[Warren McInnes]

Yes that is fine.

"Emergency Implementation" - Radio button = customfield_11911

Options = "None" and "This is an emergency implemetation"

Would that be correct?

[Warren McInnes]

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

[Warren McInnes]

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?

[Warren McInnes]

Anyone care to help on this?