You are viewing limited content. For full access, please sign in.

Question

Question

How to use JavaScript to display an html field if some checkboxes are checked on form load

asked on October 19, 2020

After the initial form has been submitted and it routes to an approver, I am trying to get an html field(ExecApproval) to show only if four or more days are checked for Week 1(.CoreWkone) or Week 2(.CoreWktwo).  I am not an expert on JavaScript but I was able to get some JS to work on a change function in the initial form.  However, I am unable to get my JavaScript to work on a load function in the approval form.  I would like the JavaScript to check which days of the week are checked on load and if four or more days are checked per week, then show the html otherwise hide the html.  Can someone please help me fix the JavaScript I am using (see below)?

$(document).ready(function(){
  
    $('.ExecApproval').hide();
  
	var check1 = $('.CoreWkone input[type=Checkbox][value=Mon1]').is(':checked');
   	var check2 = $('.CoreWkone input[type=Checkbox][value=Tues1]').is(':checked');
	var check3 = $('.CoreWkone input[type=Checkbox][value=Wed1]').is(':checked');
	var check4 = $('.CoreWkone input[type=Checkbox][value=Thurs1]').is(':checked'); 
	var check5 = $('.CoreWkone input[type=Checkbox][value=Fri1]').is(':checked'); 
    var check6 = $('.CoreWktwo input[type=Checkbox][value=Mon2]').is(':checked');
   	var check7 = $('.CoreWktwo input[type=Checkbox][value=Tues2]').is(':checked');
	var check8 = $('.CoreWktwo input[type=Checkbox][value=Wed2]').is(':checked');
	var check9 = $('.CoreWktwo input[type=Checkbox][value=Thurs2]').is(':checked'); 
	var check10 = $('.CoreWktwo input[type=Checkbox][value=Fri2]').is(':checked');
			 				
   if (check1 && check2 && check3 && check4 || check2 && check3 && check4 && check5 || check1 && check3 && check4 && check5 || check1 && check2 && check4 && check5 || check1 && check2 & check3 && check5||
       check6 && check7 && check8 && check9 || check7 && check8 && check9 && check10 || check6 && check8 && check9 && check10 || check6 && check7 && check9 && check10 || check6 && check7 & check8 && check10) {
      $('.ExecApproval').show();
      }
    
    else
      {
      $('.ExecApproval').hide();
      }

  });
});	

 

0 0

Answer

SELECTED ANSWER
replied on October 19, 2020

It might be easier to configure a field rule, then prevent it from acting on the initial form by using javascript to populate a hidden field when the user task is loaded, which the field rule also requires.

It is just easier to work with field rules over javascript, and this simplifies your javascript.

1 0
replied on October 19, 2020

That is a better solution. No JS needed. I guess I was just answering in the context of the question asked.

0 0

Replies

replied on October 21, 2020

Thank you again Zane and Chad.  I was able to get this working perfectly with minimal JS. smiley

1 0
replied on October 19, 2020

You could assign a class to your checkboxes like ".week1" then do a for each on them. If checked, they add 1 to an int variable. If the int value is >= 4, then show your .execApproval.

0 0
replied on October 20, 2020

I like this idea.  I will try it and see if I can get it to work.  Thank you Zane and Chad.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.