Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

Submit button visible/hidden based on multiple check box selections

Avatar

Former Community Member

Hello,

I have this form (attached) and I would like to show/hide submit buttons on each of the form pages based on which items are checked.

So, for example:

box 1 is checked, submit2 is visible

box 2 is checked, submit3 is visible

box 3 is checked, submit4 is visible

box 1 & 2 are checked, submit3 is visible and submit2 is invisible

box 2 & 3 are checked, submit4 is visible and submit3 is invisible

etc.

I want to be able to set the variable so that if multiple boxes are checked, it goes to the last page submit button. I have no problem getting the first 3 options to work, the problem occurs when I try to do the multiple check commands.

This works to show/hide a single check box selection

if ( this.rawValue == "1" )

CommunicationServiceRequestForm.WebChatReq.Submit2.presence = "visible";

else

CommunicationServiceRequestForm.WebChatReq.Submit2.presence = "invisible";

This is what I have for scripting so far (that doesn't hide the first of the 2 submit buttons):

if (this.rawValue == 1 || EmailChk.rawValue == 0 || PhoneChk.rawValue == 0){

     CommunicationServiceRequestForm.WebChatReq.Submit2.presence = "visible"; }

else {

     CommunicationServiceRequestForm.WebChatReq.Submit2.presence = "invisible";}

Any insight would be greatly appreciated!

4 Replies

Avatar

Level 7

How about making each submit button visible when the corresponding checkbox is checked on the click event of the checkbox, for example:

if (checkbox1.rawValue == 1){

     submit2.presence = "visible";

     }

if (checkbox2.rawValue == 1){

     submit3.presence = "visible";

     }

and then on the exit of checkbox2:

if (checkbox1.rawValue == 1){

     submit2.presence = "hidden";

     }

on the exit of checkbox3:

if (checkbox2.rawValue == 1){

     submit3.presence = "hidden";

     }

In other words, show each submit button on the click event of the corresponding checkbox, and then re-hide them if the next checkbox in line gets checked.

Avatar

Former Community Member

That tentatively works if the boxes are checked in sequence, but what if the boxes are checked out of sequence or unchecked out of sequence?

Do you know of a way to add multiple values to 1 if statement?

Thanks again...

Avatar

Level 7

No problem, here are your 3 scripts for each checkbox. I'm working on the assumption that the submit buttons are hidden

from the start.

On checkbox1 click event:

if (this.rawValue == 1){

     submit2.presence = "visible";

     submit3.presence = "hidden";

     submit4.presence = "hidden";

     }

if (this.rawValue == 0){

     submit2.presence = "hidden";

On checkbox2 click event:

if (this.rawValue == 1 && CheckBox1.rawValue == 0){

     submit3.presence = "visible";

     submit2.presence = "hidden";

     submit4.presence = "hidden";

     }

if (this.rawValue == 0){

     submit3.presence = "hidden";

     }  

On checkbox3 click event:

if (this.rawValue == 1 && CheckBox1.rawValue == 0 && CheckBox2.rawValue == 0){

     submit4.presence = "visible";

     submit2.presence = "hidden";

     submit3.presence = "hidden";

     }

if (this.rawValue == 0){

     submit4.presence = "hidden";

     }

This leaves only the highest level submit button visible to the user and hides the corresponding submit button if any of the checkboxes gets unchecked.

                        

 

  

Avatar

Former Community Member

Thanks djaknow, this got me going in the right direction, but I had to add additional code to cover all of the possibilities on each of the checkboxes. I will post it in case anyone else runs into this problem:

In the click event of checkbox 1

if (this.rawValue == 1 && CheckBox2.rawValue == 0 && CheckBox3.rawValue == 0){

     Submit2.presence = "visible";

     Submit3.presence = "invisible";

     Submit4.presence = "invisible";

}

if (this.rawValue == 1 && CheckBox2.rawValue == 1 && CheckBox3.rawValue == 0){

     Submit2.presence = "invisible";

     Submit3.presence = "visible";

     Submit4.presence = "invisible";

if (this.rawValue == 1 && CheckBox2.rawValue == 0 && CheckBox3.rawValue == 1){

     Submit2.presence = "invisible";

     Submit3.presence = "invisible";

     Submit4.presence = "visible";

}

if (this.rawValue == 1 && CheckBox2.rawValue == 1 && CheckBox3.rawValue == 1){

     Submit2.presence = "invisible";

     Submit3.presence = "invisible";

     Submit4.presence = "visible";

}

if (this.rawValue == 0 && CheckBox1.rawValue == 1 && CheckBox3.rawValue == 0){

     Submit4.presence = "invisible";

     Submit2.presence = "visible";

     Submit3.presence = "invisible";

}

if (this.rawValue == 0 && CheckBox1.rawValue == 1 && CheckBox3.rawValue == 1){

     Submit4.presence = "invisible";

     Submit2.presence = "invisible";

     Submit3.presence = "visible";

}

if (this.rawValue == 0 && CheckBox1.rawValue == 1 && CheckBox3.rawValue == 1){

     Submit4.presence = "invisible";

     Submit2.presence = "invisible";

     Submit3.presence = "visible";

}

In the click event of checkbox2

if (this.rawValue == 1 && CheckBox1.rawValue == 0 && CheckBox3.rawValue == 0){

     Submit3.presence = "visible";

     Submit4.presence = "invisible";

     Submit2.presence = "invisible";

}

if (this.rawValue == 1 && CheckBox1.rawValue == 1 && CheckBox3.rawValue == 0){

     Submit3.presence = "visible";

     Submit4.presence = "invisible";

     Submit2.presence = "invisible";

}

if (this.rawValue == 1 && CheckBox1.rawValue == 0 && CheckBox3.rawValue == 1){

     Submit3.presence = "invisible";

     Submit4.presence = "visible";

     Submit2.presence = "invisible";

}

if (this.rawValue == 1 && CheckBox1.rawValue == 1 && CheckBox3.rawValue == 1){

     Submit3.presence = "invisible";

     Submit4.presence = "visible";

     Submit2.presence = "invisible";

}

if (this.rawValue == 0 && CheckBox1.rawValue == 1 && CheckBox3.rawValue == 0){

     Submit4.presence = "invisible";

     Submit2.presence = "visible";

     Submit3.presence = "invisible";

}

if (this.rawValue == 0 && CheckBox1.rawValue == 1 && CheckBox3.rawValue == 1){

     Submit4.presence = "visible";

     Submit2.presence = "invisible";

     Submit3.presence = "invisible";

}

if (this.rawValue == 0 && CheckBox1.rawValue == 0 && CheckBox3.rawValue == 1){

     Submit4.presence = "visible";

     Submit2.presence = "invisible";

     Submit3.presence = "invisible";

}

In the click event of checkbox3

if (this.rawValue == 1 && CheckBox1.rawValue == 0 && CheckBox2.rawValue == 0){

     Submit4.presence = "visible";

     Submit2.presence = "invisible";

     Submit3.presence = "invisible";

}

if (this.rawValue == 1 && CheckBox1.rawValue == 1 && CheckBox2.rawValue == 0){{

     Submit4.presence = "visible";

     Submit2.presence = "invisible";

     Submit3.presence = "invisible";

}

if (this.rawValue == 1 && CheckBox1.rawValue == 0 && CheckBox2.rawValue == 1){{

     Submit4.presence = "visible";

     Submit2.presence = "invisible";

     Submit3.presence = "invisible";

}

if (this.rawValue == 1 && CheckBox1.rawValue == 1 && CheckBox2.rawValue == 1){

     Submit4.presence = "visible";

     Submit2.presence = "invisible";

     Submit3.presence = "invisible";

}

if (this.rawValue == 0 && CheckBox1.rawValue == 1 && CheckBox2.rawValue == 0){

     Submit4.presence = "invisible";

     Submit2.presence = "visible";

     Submit3.presence = "invisible";

}

if (this.rawValue == 0 && WebChatChk.rawValue == 1 && EmailChk.rawValue == 1){

     Submit4.presence = "invisible";

     Submit2.presence = "invisible";

     Submit3.presence = "visible";

}

if (this.rawValue == 0 && WebChatChk.rawValue == 0 && EmailChk.rawValue == 1){

     Submit4.presence = "invisible";

     Submit2.presence = "invisible";

     Submit3.presence = "visible";

}