get value from multiselect combo using javascript

[jwilliamson]

Hi All!
I was wondering how one could go about obtaining a value from a multiselect box in java script. I have 5 multiselect boxes that I'm going to loop through and then each combo box has n options that the user can select based on what is pulled from the database. I have some code but it doesn't pass anything into the array. I would assume that the value returned from the grid would be some type of array. I'm not super familiar with arrays in javascript and some of the tutorials seem to have conflicting methods of redimensioning an array so that might be part of the problem I'm having here

	
	var multiBoxFields = ['Initiative','EquipmentType','Status','Milestone','RebateProgram']; 
	var filterValues = '';
	var temp;
	
....

for (i=0; i<multiBoxFields.length; i++){
		
		var tempArray[] = {grid.object}.getValue('S',multiBoxFields[1]);
		for (j=0;
		if (tempArray[1]  != ''){
			filterValues +=  "<button id=filter-" + multiBoxFields[1] + 
			" onclick='removeSelectedFilter("+multiBoxFields[1]+"); return false;'>"+tempArray[1] +"</button>";
			}
		}	
	
	document.getElementById('current-filter').innerHTML = filterValues;

[Davidk]

Re: get value from multiselect combo using javascript

Hey Joseph,

I think this is what you're after... https://youtu.be/4XMcv8eU16k

function processSearch(){

debugger;

	var multiBoxFields = ['Initiative','EquipmentType','Status','Milestone','RebateProgram']; 
	var filterValues = '';
	var allFilterValues = '';
	var temp;
		
	for (i=0; i<multiBoxFields.length; i++){
			temp = {grid.object}.getValue('S',multiBoxFields[i]);
			temp = temp.slice(0, -1);
			if(temp != ''){
				var tempArray = temp.split(',');
				for(j=0;j<tempArray.length;j++){
					myValue = '"' + multiBoxFields[i] + '"';
					filterValues +=  "<button id=filter-" + multiBoxFields[i] + " onclick='removeSelectedFilter("+myValue+"); return false;'>" +tempArray[j] +"</button>";
				}	
			}	
		
	$('current-filter').innerHTML = filterValues;

	}

}

function removeSelectedFilter(myFilter){

alert(myFilter);

}

[jwilliamson]

Re: get value from multiselect combo using javascript

Hey David! That video is awesome, thank you for going to that effort. I'm having some trouble getting this to work though. Your code runs but there are no buttons created. I put the following alerts in and the first alert will show the Field name (ie Initiative, EquipmentType) for the first alert and "undefined undefined" for the second. I have some default text in the DIV that this clears out so I know it's running it just seems it not getting any values from the combo boxes. I wonder if it matters that my values are coming from the database. I'm going to change one field to a static list and see what happens.

function processSearch(){

debugger;

	var multiBoxFields = ['Initiative','EquipmentType','Status','Milestone','RebateProgram']; 
	var filterValues = '';
	var allFilterValues = '';
	var temp;
		
	for (i=0; i<multiBoxFields.length; i++){
			alert(multiBoxFields[i]);
			temp = {grid.object}.getValue('S',multiBoxFields[i]);
			alert(temp[0] + ' ' + temp[1]);
			temp = temp.slice(0, -1);
			if(temp != ''){
				var tempArray = temp.split(',');
				for(j=0;j<tempArray.length;j++){
					myValue = '"' + multiBoxFields[i] + '"';
					filterValues +=  "<button id=filter-" + multiBoxFields[i] + " onclick='removeSelectedFilter("+myValue+"); return false;'>" +tempArray[j] +"</button>";
				}	
			}
		}	
		
	$('current-filter').innerHTML = filterValues;

	

}

function removeSelectedFilter(myFilter){

alert(myFilter);

}

[jwilliamson]

Re: get value from multiselect combo using javascript

I think the difference is the way your boxes are setup. Mine are list boxes where you have to scroll down and select different values on separate lines whereas your setup builds them into a string, which may actually be better for the site I'm building.

[Davidk]

Re: get value from multiselect combo using javascript

Your first post said combo boxes... so that's what I went with. I'm not sure which control you are using. Could you elaborate?

Got it... you're using a DropDownBox control configured as a List and multi-value select. If you want to do this then more processing is involved. There may be an internal method for getting the selected values of a multi-select DropDownBox configered as a List, but I haven't looked yet.

Instead, get the control directly and look for, and process, the selected items. Here is the full function which does this. I've only converted 2 of the 5 controls for testing. As well, for this to work, uppercase the names in the multiBoxFields variable.

Once you get the control object, the childNodes property's first array value will hold an array of available selections. Each of these arrays has a 'label' and 'selected' property. First check to make sure we're working with a valid selection by looking at the label. If it's not empty, then go and check the 'selected' property. This will be either true or false. If it's true, then push that array label into your tempArray array. The process the tempArray as before to get your buttons.

function processSearch(){

debugger;

	var multiBoxFields = ['INITIATIVE','EQUIPMENTTYPE']; 
	//var multiBoxFields = ['INITIATIVE','EQUIPMENTTYPE','STATUS','MILESTONE','REBATEPROGRAM']; 
	var filterValues = '';
	var allFilterValues = '';
	var temp;
	var items;
	var tempArray = [];
	var myValue;
		
	for (i=0; i<multiBoxFields.length; i++){
			temp = $('{grid.ComponentName}.S.TD.'+multiBoxFields[i]);
			var items = temp.childNodes[0]
			for(x=0;x<items.length;x++){
				if(items[x].label != ''){
					if(items[x].selected == true){
						tempArray.push(items[x].label);
					}
				}
			}	

			for(j=0;j<tempArray.length;j++){
				myValue = '"' + multiBoxFields[i] + '"';
				filterValues +=  "<button id=filter-" + multiBoxFields[i] + " onclick='removeSelectedFilter("+myValue+"); return false;'>" +tempArray[j] +"</button>";
			}	
				
			var tempArray = [];
		
	}

	$('current-filter').innerHTML = filterValues;

}

[jwilliamson]

Re: get value from multiselect combo using javascript

Ok so I was able to get it to work. It was much simpler than I thought. I will probably update this post when I'm done because it could be a useful bit of code for someone working with filters. In the end the users will be able to click the filter buttons that are rendered in the freeform section and the buttons will remove that value from the multiselect box without removing the rest of the values, it will also remove the button which will be customized with an X on it to indicate this is a way to clear filters. For now we can just see that the correct values were passed to the removeSelectedFilter function.

Thanks for the help David, also the debugger is cool! I just switched to chrome for debugging and development and that break popped up. I was wondering what that would do lol.

function processSearch(){



	var multiBoxFields = ['INITIATIVE[]','EQUIPMENTTYPE[]','STATUS[]','MILESTONE[]','REBATEPROGRAM[]']; 
	var filterValues = '';
	var allFilterValues = '';
	var temp;
		
	for (i=0; i<multiBoxFields.length; i++){
			temp = {grid.object}.getValue('S',multiBoxFields[i])
			if(temp != ''){		
				for(j=0;j<temp.length;j++){
					myBox = '"' + multiBoxFields[i] + '"';
					myValue = '"' + temp[j] + '"';
					debugger;
					filterValues +=  "<button id=filter-" + multiBoxFields[i] + " onclick='removeSelectedFilter("+myBox+","+myValue+"); return false;'>" +temp[j] +"</button>";
				}	
			}
		}	
		
	$('current-filter').innerHTML = filterValues;

	

}

function removeSelectedFilter(myField, myValue){

alert(myField);
alert(myValue);

}

[jwilliamson]

Re: get value from multiselect combo using javascript

So here is the final (yeah right!) iteration of this code:

It takes the values from various search filtesr(textboxes, rangeboxs, and multiselect list boxes) and uses their values to setup buttons that display those values. So if the user types "Philadelphia" into a search box they now see a label that says "City: " followed by a "Philadelphia" button. This makes it easy for the user to see which values they have selected and then when the user clicks the button it removes the filter. There also appears a clear all filters button whenever a filter is added and when the last one is removed by clicking it's respective button the clear filter button is removed. It's pretty neat. I may have to screencast this one of these days if anyone is interested.

function getFormValues(){
	//This function is called in the afterSearchSubmit event after every time a search is submitted including clearing the search. 	
	var textBoxFields = ['Id', 'SiteId', 'ProjectName', 'City', 'State', 'Zip', 'Initiative'];
	var textBoxLabels = ['Id', 'SiteId', 'ProjectName', 'City', 'State/Prov', 'Zip', 'Initiative'];
	var rangeFields = ['STARTDATE', '_TO.STARTDATE', 'ENDDATE', '_TO.ENDDATE', 'INCENTIVE', '_TO.INCENTIVE'];
	var rangeLabels = ['Start Date Begin', 'Start Date End', 'Completion Date Begin', 'Completion Date End', 'Incentive Low Range', 'Incentive Upper Range'];
	var multiBoxFields = ['INITIATIVE[]','EQUIPMENTTYPE[]','STATUS[]','MILESTONE[]','REBATEPROGRAM[]'];
	var multiBoxLabels = ['Initiative','Equipment Type', 'Status', 'Milestone', 'Rebate Program'];  
	var filterValues = 'Current Filters<br>';
	var bFilterSelected = false;
	var temp;

	
	
	for (i=0; i<textBoxFields.length; i++){
		temp = {grid.object}.getValue('S',textBoxFields[i]);
		
		if (temp != ''){
			mySearchField = '"' + textBoxFields[i] + '"';
			mySearchValue = '"' + temp + '"';
			filterValues += "<p>"+textBoxLabels[i]+": <button type='button' class='clear' id=filter-" + textBoxFields[i] + 
			" onclick='removeSelectedFilterTextbox("+mySearchField+"); return false;'>"+temp+"</button> ";
			bFilterSelected = true;
			}
		}
	temp = '';
	
	for (i=0; i<rangeFields.length; i++){
		temp = $('{grid.componentname}.S.'+rangeFields[i]).value;
		if (temp != ''){
			mySearchField = '"' + rangeFields[i] + '"';
			mySearchValue = '"' + temp + '"';
			filterValues +=  "<p><button type='button' class='clear' id=filter-" + rangeFields[i] + 
			" onclick='removeSelectedFilterRange("+mySearchField+"); return false;'>"+rangeLabels[i]+"</button> ";
			bFilterSelected = true;
			}
		}
	temp = '';
	
	for (i=0; i<multiBoxFields.length; i++){
			temp = {grid.object}.getValue('S',multiBoxFields[i])
			if(temp != ''){
				filterValues += "<p>" + multiBoxLabels[i] + ": ";
				bFilterSelected = true;
				for(j=0;j<temp.length;j++){
					mySearchField = '"' + multiBoxFields[i] + '"';
					mySearchValue = '"' + temp[j] + '"';					
					filterValues +=  "<button type='button' class='clear' id=filter-" + multiBoxFields[i] + " onclick='removeSelectedFilterMulti("+mySearchField+","+mySearchValue+"); return false;'>" +temp[j] +"</button>";
					
				}	
			}			
		}	
		//Check to see if any filters have been set
		
		if (bFilterSelected){
			filterValues += '<p><button type="button" class="clear" id="btn-clear-filter-dynamic" class="advanced-btns" onclick="clearAndSubmitAllFilters(); return false;">Clear Filters</button>'
		}else{filterValues = ''}
	document.getElementById('current-filter').innerHTML = filterValues;
}


function removeSelectedFilterTextbox(searchField){
//set value for selected textbox blank and submit search
	{grid.object}.setValue('S',searchField,'');
	{grid.object}.submitSearchForm();

}

function removeSelectedFilterRange(searchField){
//set value for selected range field blank and submit search
//range must use low level javascript
	$('{grid.componentname}.S.' + searchField).value = '';
	{grid.object}.submitSearchForm();
}

function removeSelectedFilterMulti(searchField, filterValue){

//find the filter in the array, splice it out and then assign the new array to the multi selectbox and submit

	var filterString = {grid.object}.getValue('S',searchField); 	//returns an array
	var locInStr = filterString.indexOf(filterValue);
	filterString.splice(locInStr ,1);
	{grid.object}.setValue('S',searchField,filterString);
	{grid.object}.submitSearchForm();

}