Support

Start a conversation

How to make conditions on checkboxes

 

Summary

This article is useful if you want to have a textbox that only appears in the form when a specific checkbox is selected.

 

Resolution

This is an example on how to make displaying a field depending on a checkbox being checked.

If the checkbox ‘More info?’ is checked, the next line and textbox will be displayed.

The text marked with yellow in this HTML needs to be added manually in the HTML-code (you have to click on ‘Source’ to get there).

The text marked with pink is the name of the script you are calling.

The text marked with green is the ID of the text that we want to control. In the script we need to refer to this ID.

The text marked with red is the ID of the check box we want to control.

HTML-code:

For RC 3.8 → 4.0 SR1:


More info?  PROP_14_More_info" isrequired="0" name="PROP_14_More_info" onclick="check(this)" title="" type="checkbox" value="Tjek" />


id="info" style="display: none"> Please add extra info: 


function LoadChecked()

{

   var isItemChecked = document.getElementById("PROP_14_More_info").checked;

   if(isItemChecked==true)

   {

                 document.all['info'].style.display = "inline";

   }

}

 

//call load checked function

setTimeout(function(){ LoadChecked();}, 1000);

 

function check(ctrl)

{

            //get the state of the check box

            if (ctrl.checked == true) {

                        //the box is checked, so show the text

                        document.all['info'].style.display = "inline";

            } else {

                        //hide the table

                        document.all['info'].style.display = "none";

            }

}


For RC 4.0 SR2+:


More info?  PROP_14_More_info" isrequired="0" name="PROP_14_More_info" onclick="check(this)" title="" type="checkbox" value="Tjek" />

 


id="info" style="display: none">Please add extra info: 

 


 


 

function LoadChecked()

 

{

            // find wrapper of affected order form to find the element exactly.

   var $wrapper = getWrapper();

  

   if($wrapper.find('#PROP_14_More_info').is(':checked'))

   {

              $wrapper.find('#info').css('display', 'inline');

   }

}

 

//call load checked function

 

setTimeout(function(){ LoadChecked();}, 1000);

 

function check(ctrl)

{

            // find wrapper of affected order form to find the element exactly.

            var $wrapper = getWrapper();

            //get the state of the check box

 

            if (ctrl.checked == true) {

                        //the box is checked, so show the text

                        $wrapper.find('#info').css('display', 'inline');

            } else {

                        //hide the table

                        $wrapper.find('#info').css('display', 'none');

            }

}

 

function getWrapper(){

            var $wrapper = null;

            // in reservation detail, if shared order tab is loaded and actived

            if($('#divReservationsDetail #order-content .active').length > 0){

                        $wrapper = $('#divReservationsDetail #order-content .active');

            }

            // in resource finder, get actived tab as container

            else if($('#order-form-detail .tab-content.active').length > 0){

                        $wrapper = $('#order-form-detail .tab-content.active');

            }

            // in shared order form only (link mail)

            else if($('.shared-order-container').length > 0){

                        $wrapper = $('.shared-order-container');

            }

            // in other forms, if normal order tab is shown

            else if(typeof(baseModel) != 'undefined'){

                        $wrapper = baseModel.currentOrder.$wrapper;

            }

            return $wrapper;

}


If you want to make different checks in your form, you must create a script for each and call the script from each checkbox.

The examples are meant as inspiration.

 

Properties

Applies to: RC 3.7.10; RC 3.8 and RC 4.0

Reference: TFS #8527; #119094; #147137

Knowledge base ID: 0055

Last updated: Oct 03, 2017

Choose files or drag and drop files