Set drop down value based on two check boxes with javascript

J
Badge +2

I'm hoping someone can help me with Javascript syntax. I have a form where I need to set the value of a drop down based on the selection of two check boxes. I found a very good solution for setting the value with a single check box, but I can't seem to adapt it for two check boxes. I am in the process of moving a bunch of forms from Infopath to Nintex and am just now learning a little about Javascript. Here's the solution for a single check box:

 

https://community.nintex.com/t5/Nintex-for-SharePoint/Setting-a-choice-option-value-based-on-a-checkbox-value-NINTEX/td-p/19238

 

Here's the script I was using for setting the dropdown value with a single check box (cribbed from the above post):

 

NWF.FormFiller.Events.RegisterAfterReady(function () {

   NWF$("#"+Checkbox1).click(function(){

     if(NWF$(this).prop("checked")){ 

        NWF$("#"+Dropdown).val("Active");

     }

   else{

NWF$("#"+Dropdown).val("Inactive");

   }

   })

})

 

However, what I need is for the dropdown to only change when BOTH boxes are checked. Here's my sample form:

 

2389i477C31CFD2671E20.jpg

 

Here are the settings for Checkbox1. Checkbox2 is the same except everything is called Checkbox2.

 

2390iAD5450C108E1466D.jpg

Any tips on how to proceed would be greatly appreciated. Thanks in advance!

 

4 replies

R
Badge +4

so, are you trying to change the dropdown value based on two different checkboxes, here is the solution.

 

NWF$("#"+chkbox1).click(function(){    
if(NWF$(this).prop("checked")){
NWF$("#"+ddl).val("Active");} 

});
 
NWF$("#"+chkbox2).click(function(){    
if(NWF$(this).prop("checked")){
NWF$("#"+ddl).val("InActive");} 
});
 
But i think you need to use radio buttons instead of checkboxes because in checkboxes you can select both at a time and the value in the dropdown list will be based on last selected checkbox.
 
Using Radio Buttons:varoptions is Javascipt variable of Radio button field with Checkbox1 and Checkbox2 as options
2410iD37B68874472AF80.jpg
 
NWF$("#"+varOptions).change(function(){    
var optionSelected = NWF$("#"+varOptions).find("input:checked").val();
if(optionSelected == "Checkbox1"){
NWF$("#"+ddl).val("Active");
}
else{NWF$("#"+ddl).val("InActive");
}
});
J
Badge +2

Ramesmusham,

 

Thanks so much for the response. In my example, I put the two check boxes next to each other for simplicity, but in my actual application they are in different tabs of a tabbed form, so they can't be part of the same control like they could be if they were radio buttons. I also have a requirement that it doesn't matter which box is checked first but that the drop down only changes when both are checked. There are actually two different types of users who will access the form and each will only have access to one check box (the "wrong" box will be locked out for that user).

 

So, I would like to use your example, but maybe I'm misunderstanding your script, but it looks to me like the second box "chkbox2," sets the dropdown to "Inactive."

 

NWF$("#"+chkbox1).click(function(){
if(NWF$(this).prop("checked")){
NWF$("#"+ddl).val("Active");}
});

NWF$("#"+chkbox2).click(function(){
if(NWF$(this).prop("checked")){
NWF$("#"+ddl).val("InActive");}
});

 

 

Thank you again for being willing to look at and help me with my problem. 

 

 

E
Userlevel 5
Badge +14

try something like this 

 

function SetDropdown(){
  if(NWF$("#"+chkbox1).prop("checked") && NWF$("#"+chkbox2).prop("checked")){
    NWF$("#"+ddl).val("Active"); 
  } else{
    NWF$("#"+ddl).val("InActive"); 
  }
}


NWF$("#"+chkbox1).click(SetDropdown);


NWF$("#"+chkbox2).click(SetDropdown);
J
Badge +2

This works perfectly!  Thank you SO MUCH for helping me out here--I'm chugging my way through Javascript tutorials, but it's taking a while for the syntax and logic to sink in for me, and I needed to get this particular form published.

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings