Solved

Setting Multi-select value based off of 2 drop down values

  • 7 February 2023
  • 3 replies
  • 358 views

Badge +1

Hello, 

 

I have been trying to find some javascript that will set a multi-select value based off of two other choice fields. 

 

Details below:

 

Here are my three fields (not lookups): 

  1. Request type (Choice - Radio button):  New, Access
  1. User Type: (Choice - drop-down):  internal 1 , internal 2, external 1, external 2
  1. Account types (Choice - multiselect) :  SW1, SW2, SW3, SW4, SW5

 

If Request type = New 

AND

IF User type = Internal 1 OR Internal 2

THEN

Auto select Account Types = SW1 and SW 2 and SW 3 

 

I am still using SP2013

 

Any assistance would be greatly appreciated :) 

 

@MegaJerk  Thanks for pointing me in the right direction to repost as a new topic! 

icon

Best answer by MegaJerk 8 February 2023, 07:19

View original

3 replies

Userlevel 5
Badge +14

 

 

Here is an example form:

 

All of my controls have been given a JavaScript ID Variable name that closely follows the name of the Control:

 

 

 

 

Inside of the Form Settings → Custom JavaScript:

 

 

I have the following code:

/*
First we set an onChange event handler for both the Request and User
Type controls. Doing this will ensure that no matter which one is changed
in whichever order, we're always going to be checking to see if your
specified conditions are true.
*/

NWF$("#" + requestTypeID + ", #" + userTypeID).on("change", function(event){

/* Here is an array containing all of the values that you'd like to be checked
on the Account Types control in the event that all conditions are met.

I've put them in an array like this in the event that you may want to change
them later or add new ones. */
var valuesToCheck = ["SW1", "SW2", "SW3"];

/* Create a variable for the requestType Control */
/* Create a variable for the 'New' radio button option */
/* Create a variable that will equal true if requestTypeNew is checked */
var requestType = NWF$("#" + requestTypeID);
var requestTypeNew = requestType.find("input[type='radio'][value='New']");
var isNewChecked = requestTypeNew.prop("checked");

/* Create a variable for the userType Control */
/* Create a variable for the value of the userType Control */
/*
Create a variable that will equal true if userTypeValue
contains either "internal 1" or "internal 2"
*/
var userType = NWF$("#" + userTypeID);
var userTypeValue = userType.val();
var isInternalUserType = ["internal 1", "internal 2"].indexOf(userTypeValue.toLowerCase()) > -1;

/* Create a variable for the accountTypes Control */
var accountTypes = NWF$("#" + accountTypesID);

/* If ALL conditions are true then... */
if (isNewChecked && isInternalUserType) {
/* Loop through each checkbox of the accountTypes Control */
accountTypes.find("input[type='checkbox']").each(function(index, checkbox){

/* makes sure that the checkbox is a jquery object */
checkbox = NWF$(checkbox);

/* if valuesToCheck contain the value of the checkbox... */
if (valuesToCheck.indexOf(checkbox.val()) > -1) {

/* then we check it! */
checkbox.prop("checked", true);
}
});
}
});

 

The code is commented to describe what’s happening, but it should do exactly what you’ve asked for.

 

Example showing when all conditions are NOT met:

 

But when they are:

 

This is all well and good, but I wonder what should happen if all you select “New” and then “Internal 1” but then decide that it’s actually “external 1”. Should the Accounts Types be cleared? Or should those auto-selected values remain selected? 

 

No matter, if this is satisfactory to answering the question, let me know. But if you have further things to ask feel free to. 

Badge +1

@MegaJerk  Brilliant! Thank you so much - works great! Appreciate the quick response. 

 

RE: “This is all well and good, but I wonder what should happen if all you select “New” and then “Internal 1” but then decide that it’s actually “external 1”. Should the Accounts Types be cleared? Or should those auto-selected values remain selected? “

I didn't think through if the External should be selected that the checkboxes clear as well - that probably wouldn't be a bad idea -to clear the values if external is selected, if you have a solution for that I will gladly take that and implement as well. 

 

Thanks again for all the help, appreciate it greatly. 

Userlevel 5
Badge +14

I’ve worked up some slightly more defined code that should handle clearing out the AccountTypes checkboxes in the event that the user changes the requestType or userType to a value that no longer meets your conditions, but which used to be in a state that *did*. 

 

So if Previously requestType = “New” and userType = “Internal 1”, but the user changes userType to “External 1” then we are going from meeting all of your conditions to Not meeting all of your conditions, which should result in the Account Types control being cleared of all checkboxes.

 

 

However if previously the requestType = “New” and the userType = “External 2”, and the user changes requestType to “Access”, anything they had checked in Account Types wouldn’t change at all because at no point had any of the main conditions been met (which would have necessitated our automated checking of the boxes). 

 

 

Any who, here is the code with comments to help for any guidance:

/*
First we set an onChange event handler for both the Request and User
Type controls. Doing this will ensure that no matter which one is changed
in whichever order, we're always going to be checking to see if your
specified conditions are true.
*/

NWF$("#" + requestTypeID + ", #" + userTypeID).on("change", function(event){

/* Here is an array containing all of the values that you'd like to be checked
on the Account Types control in the event that all conditions are met.

I've put them in an array like this in the event that you may want to change
them later or add new ones. */
var valuesToCheck = ["SW1", "SW2", "SW3"];

/* Create a variable for the requestType Control */
/* Create a variable for the 'New' radio button option */
/* Create a variable that will equal true if requestTypeNew is checked */
var requestType = NWF$("#" + requestTypeID);
var requestTypeNew = requestType.find("input[type='radio'][value='New']");
var isNewChecked = requestTypeNew.prop("checked");

/* Create a variable for the userType Control */
/* Create a variable for the value of the userType Control */
/*
Create a variable that will equal true if userTypeValue
contains either "internal 1" or "internal 2"
*/
var userType = NWF$("#" + userTypeID);
var userTypeValue = userType.val();
var isInternalUserType = ["internal 1", "internal 2"].indexOf(userTypeValue.toLowerCase()) > -1;

/* Create a variable for the accountTypes Control */
var accountTypes = NWF$("#" + accountTypesID);

/* Here I will create or get the value of a jQuery data object on the
requestType Control, that will be used to track the current and
previous state of the conditions in question. This will be useful in
assisting me in knowing when I should clear any selections that checked
on the AccountTypes Control. After all, if a user had
configured all three controls in some way that didn't meet the conditions
of "New" and "Internal 1/2", and then made a change to either RequestType
or UserType that *also* didn't meet those conditions, then we really
don't want to frustrate the user by erasing all of their checkboxes
for the Account Types Control. */

var stateObject = NWF$("#" + requestTypeID).data ("stateObject") || NWF$("#" + requestTypeID).data ("stateObject", {"currentState":false, "previousState": false}).data ("stateObject");

/* Now we set the "previousState" to the value of "currentState" */
stateObject.previousState = stateObject.currentState;

/* And update the currentState value to what is actually the current state! */
stateObject.currentState = isNewChecked && isInternalUserType;

/* If ALL conditions are true then... */
if (isNewChecked && isInternalUserType) {
/* Loop through each checkbox of the accountTypes Control */
accountTypes.find("input[type='checkbox']").each(function(index, checkbox){

/* makes sure that the checkbox is a jquery object */
checkbox = NWF$(checkbox);

/* if valuesToCheck contain the value of the checkbox... */
if (valuesToCheck.indexOf(checkbox.val()) > -1) {

/* then we check it! */
checkbox.prop("checked", true);
}
});


/* Otherwise if the requestType or userType controls were changed
and not all of the conditions were met then...*/
} else {

/* We check to see what the state was the last time this code ran.
If last time all conditions were met and we checked the accountTypes
automatically, but this time the conditions were NOT met, then we
can automatically uncheck all checked boxes. Otherwise, we don't do
anything! */
if (stateObject.previousState) {
NWF$("#" + accountTypesID).find("input:checked").prop("checked", false);
}
}
});

 

Enjoy!

 

Reply