Set Checkboxes to Yes based on two conditions

  • 13 February 2018
  • 6 replies
  • 3 views

Badge +4

Hi,

In my form I would like to set a series of checkboxes to yes depending on the value of two other choice fields: Applicable Gate and Type of Work.

For instance, in the screenshot below, if a person selects '8Q' then 'Emergent' then I would like the checkboxes in the table below to auto populate:

I would prefer to do this via JavaScript as there are a lot of tables and therefore a lot of checkboxes, but happy to do this another way if there are other solutions.

Please can anyone help me to do this?

Thank you happy.png 

Christina.


6 replies

Userlevel 5
Badge +14

it might look like this

NWF.FormFiller.Events.RegisterAfterReady(function () {
   NWF$('#'+jsvarApplicableGate).change(HandleSelectionChange);
   NWF$('#'+jsvarTypeOfWork).change(HandleSelectionChange);
});


function HandleSelectionChange(){
  var applicableGateVal = NWF$('#'+jsvarApplicableGate + ' input:checked').val();
  var typeOfWorkVal = NWF$('#'+jsvarTypeOfWork + ' input:checked').val();
  if(applicableGateVal === "8Q" && typeOfWorkVal === "Emergent"){
     NWF$('.ApplicableTickBoxClass input').prop('checked',true);
  } 
}

Badge +4

Thank you for this.

I have a very basic knowledge of javascript so just trying to understand which bit I change in order to include the checkbox.  Would that the text I've underlined in red?

Userlevel 5
Badge +14

you have to configure javascript variable 'jsvarApplicableGate' for 'Applicable Gate' radio control and variable 'jsvarTypeOfWork' for 'Type of Work' radio control.

next you have to configure CSS class 'ApplicableTickBoxClass' on each of checkboxes you want to get ticked based on seleceted above radios

Badge +4

Brilliant!  That worked.  I just needed to add the CSS class to the checkboxes.

My next query is... if I change my mind and select 'Waiver' after 'Emergent' the checkboxes remain checked.  What would I need to do to remove the result if the initiator changes their mind or selects the wrong radio control?

Thank you!

Userlevel 5
Badge +14

simply

function HandleSelectionChange(){
  var applicableGateVal = NWF$('#'+jsvarApplicableGate + ' input:checked').val();
  var typeOfWorkVal = NWF$('#'+jsvarTypeOfWork + ' input:checked').val();
  if(applicableGateVal === "8Q" && typeOfWorkVal === "Emergent"){
     NWF$('.ApplicableTickBoxClass input').prop('checked',true);
  } else {
     NWF$('.ApplicableTickBoxClass input').prop('checked',false);
  }
}
Badge +4

You absolute genius!  Thank you!

Reply