Load selected JS depending on a checkbox on form

[Eddie Pryce]

Is it possible to load custom JS depending on on a checkbox being selected in a tab?
I have some custom JS that works as a cascading dropdown but i need to add in some more code but i only want the new JS to load if i have checked a box and the old code to stop working

• This topic was modified 5 years ago by Eddie Pryce.

[Alexander Bautz]

You should be able to do this by triggering a function either on page load (by checking the value in the checkbox) or by a rule triggering on the checkbox. What kind of code is it you want to cancel, and what is it you like to trigger?

Alexander

[Eddie Pryce]

jQuery(document).ready(function ()  
{
     jQuery().SPServices.SPCascadeDropdowns(  
    {  
        relationshipList: "Contact",  
        relationshipListParentColumn: "Account",  
        relationshipListChildColumn: "Full_x0020_Name", 
        parentColumn: "Account",  
        childColumn: "Contact",  
        debug: true  
    });
    
    jQuery().SPServices.SPCascadeDropdowns(  
    {  
        relationshipList: "Machine",  
        relationshipListParentColumn: "Account",  
        relationshipListChildColumn: "Title", 
        parentColumn: "Account",  
        childColumn: "Machine",  
        debug: true  
    });
    
    jQuery().SPServices.SPCascadeDropdowns(  
    {  
        relationshipList: "Site",  
        relationshipListParentColumn: "Account",  
        relationshipListChildColumn: "Title", 
        parentColumn: "Account",  
        childColumn: "Site",  
        debug: true  
    });
    
    jQuery().SPServices.SPCascadeDropdowns(  
    {  
        relationshipList: "Area",  
        relationshipListParentColumn: "Account",  
        relationshipListChildColumn: "Title", 
        parentColumn: "Account",  
        childColumn: "Area",  
        debug: true  
    });
    
    jQuery().SPServices.SPCascadeDropdowns(  
    {  
        relationshipList: "Project",  
        relationshipListParentColumn: "Account",  
        relationshipListChildColumn: "Title", 
        parentColumn: "Account",  
        childColumn: "Project",  
        debug: true  
    });
    
    
    
});

This is my current code and i need this to stop and a similar set of code to load depending on a checkbox but there will be 3 check-boxes each to load different JS,

im not really clued up on JS but i managed to get the above working the way i need it to

[Alexander Bautz]

If the checkbox is checked when the page loads you can use something like this (expecting the checkbox to be boolean Yes/No):

if(getFieldValue("NameOfYourCheckbox"){
   // Is checked - run your code here
}else{
   // Not checked - run your alternative code here.
}

Alexander

[Eddie Pryce]

So i managed to get this semi working, but i have an if statement with 2 else ifs in it that selects code depending on which option is selected from a dropdown but its only allows the first selection to run then will stop working if the dropdown is changed.

Is there a way to stop this happening ? i know users will select the wrong dropdown and will have to refresh the page to get it working again(already been told i need to change this) if i run an unbind or off in the jquery it stops the rule from taking effect as well

// Hook into change event 
jQuery("select[title='Create Case By']").on("change", function() {
    
    //reset
    //$("select[title='Create Case By']").unbind();
    
    
  if(jQuery("select[title='Create Case By']").val() == "Account") {
      jQuery().SPServices.SPCascadeDropdowns(  
		{  
			relationshipList: "Contact",  
			relationshipListParentColumn: "Account",  
			relationshipListChildColumn: "Full_x0020_Name", 
			parentColumn: "Account",  
			childColumn: "Contact",  
			debug: true  
		});
		
		jQuery().SPServices.SPCascadeDropdowns(  
		{  
			relationshipList: "Project",  
			relationshipListParentColumn: "Account",  
			relationshipListChildColumn: "Title", 
			parentColumn: "Account",  
			childColumn: "Project",  
			debug: true  
		});
    
        jQuery().SPServices.SPCascadeDropdowns(  
		{  
			relationshipList: "Site",  
			relationshipListParentColumn: "Account",  
			relationshipListChildColumn: "Title", 
			parentColumn: "Account",  
			childColumn: "Site",
			debug: true  
		});
        
        jQuery().SPServices.SPCascadeDropdowns(  
		{  
			relationshipList: "Area",  
			relationshipListParentColumn: "Account",  
			relationshipListChildColumn: "Title", 
			parentColumn: "Account",  
			childColumn: "Area",			
			debug: true  
		});
		
		
		
		jQuery().SPServices.SPCascadeDropdowns(  
		{  
			relationshipList: "Machine",  
			relationshipListParentColumn: "Account",  
			relationshipListChildColumn: "Title", 
			parentColumn: "Account",  
			childColumn: "Machine",  
			debug: true  
		});
		
        }   
        
   else if (jQuery("select[title='Create Case By']").val() == "Contact") {
       
       jQuery().SPServices.SPCascadeDropdowns(  
		{  
			relationshipList: "Contact",  
			relationshipListParentColumn: "Full_x0020_Name",  
			relationshipListChildColumn: "Account", 
			parentColumn: "Contact",  
			childColumn: "Account",  
			debug: true  
		});
		
		jQuery().SPServices.SPCascadeDropdowns(  
		{  
			relationshipList: "Project",  
			relationshipListParentColumn: "Account",  
			relationshipListChildColumn: "Title", 
			parentColumn: "Account",  
			childColumn: "Project",  
			debug: true  
		});
    
        jQuery().SPServices.SPCascadeDropdowns(  
		{  
			relationshipList: "Site",  
			relationshipListParentColumn: "Account",  
			relationshipListChildColumn: "Title", 
			parentColumn: "Account",  
			childColumn: "Site",
			debug: true  
		});
        
        jQuery().SPServices.SPCascadeDropdowns(  
		{  
			relationshipList: "Area",  
			relationshipListParentColumn: "Account",  
			relationshipListChildColumn: "Title", 
			parentColumn: "Account",  
			childColumn: "Area",			
			debug: true  
		});
		
		
		
		jQuery().SPServices.SPCascadeDropdowns(  
		{  
			relationshipList: "Machine",  
			relationshipListParentColumn: "Account",  
			relationshipListChildColumn: "Title", 
			parentColumn: "Account",  
			childColumn: "Machine",  
			debug: true  
		});
		
		jQuery('select[title="Contact"]').on("change", function() {
			jQuery('select[title="Account"] :nth-child(2)').prop('selected', true);
		});
		
        }
    else if(jQuery("select[title='Create Case By']").val() == "Project") {
        jQuery().SPServices.SPCascadeDropdowns(  
		{  
			relationshipList: "Contact",  
			relationshipListParentColumn: "Account",  
			relationshipListChildColumn: "Full_x0020_Name", 
			parentColumn: "Account",  
			childColumn: "Contact",  
			debug: true  
		});
		
		jQuery().SPServices.SPCascadeDropdowns(  
		{  
			relationshipList: "Account",  
			relationshipListParentColumn: "Project",  
			relationshipListChildColumn: "Title", 
			parentColumn: "Project",  
			childColumn: "Account",  
			debug: true  
		});
    
        jQuery().SPServices.SPCascadeDropdowns(  
		{  
			relationshipList: "Site",  
			relationshipListParentColumn: "Project",  
			relationshipListChildColumn: "Title", 
			parentColumn: "Project",  
			childColumn: "Site",
			debug: true  
		});
        
        jQuery().SPServices.SPCascadeDropdowns(  
		{  
			relationshipList: "Area",  
			relationshipListParentColumn: "Project",  
			relationshipListChildColumn: "Title", 
			parentColumn: "Project",  
			childColumn: "Area",			
			debug: true  
		});
		
		
		
		jQuery().SPServices.SPCascadeDropdowns(  
		{  
			relationshipList: "Machine",  
			relationshipListParentColumn: "Project",  
			relationshipListChildColumn: "Title", 
			parentColumn: "Project",  
			childColumn: "Machine",  
			debug: true  
		});
		
		//Auto select the first item in the list to override the default "(None)"
		jQuery('select[title="Project"]').on("change", function() {
			jQuery('select[title="Account"] :nth-child(2)').prop('selected', true);
		});
		
		//Auto select the first item in the list to override the default "(None)"
		jQuery('select[title="Project"]').on("change", function() {
			jQuery('select[title="Site"] :nth-child(2)').prop('selected', true);
		});

		//Auto select the first item in the list to override the default "(None)"
		jQuery('select[title="Project"]').on("change", function() {
			jQuery('select[title="Area"] :nth-child(2)').prop('selected', true);
		});

		//Auto select the first item in the list to override the default "(None)"
		jQuery('select[title="Project"]').on("change", function() {
			jQuery('select[title="Machine"] :nth-child(2)').prop('selected', true);		
        });
		
		}	
  });

i knows this might not be the most effective way to do this but it was the first way i could get working how we need it to work other than the issue im having

[Alexander Bautz]

The code looks technically right. Does the code run to the correct if / else when you change it (if you add an alert or a console.log)?

If it does it may be an issue with reset of the SPServices cascading dropdown. I don’t know this solution so I cannot tell if it can be reset when it has first been applied – you will have to check this with the user manual for this solution.

Alexander

[Author]

Posts