Select List - Multiple - Form Variable Question

Hey there,

Let me provide an example and of my problem and maybe somebody knows a quick solution.

This is not the entire form but it will give the important parts I am having trouble with.

<form name="createProjectForm" id="createProjectForm" method="post"
 action="create-project2.cfm?createProject=1">

<select name="AVAILABLE_CATEGORIES" size="10" 
multiple="multiple" id="AVAILABLE_CATEGORIES">
				  
<option value="4">Consultation</option>	
<option value="3">Design</option>
<option value="2">Programming</option>
<option value="1">Websites</option>
<option value="5">Writing</option>
				  
</select>

<input id="createProjectButton" type="submit" 
name="Create Project" value="Create Project" class="button" />

</form>

Code (markup):

When I submit this form, I expect to see a FORM variable called AVAILABLE_CATEGORIES of type list.

However, I do not see any variable at all in the form data that resembles my select list.

I have never had any trouble like this in the past.

The only thing I am doing different is using MULTIPLE on the select list.

If anybody knows a solution to this (what variable to access after the form is submitted), it will be greatly appreciated.

Thanks in advance for any advice.

Sincerely,
Travis Walters

 

Hey there,

I think I found the problem. I have attached a graphical representation of my form. It is a little more complex than what I described above.

If you look at the graphic, the buttons in the center control the form.

Originally, when I posted my last message, the items on the right were not getting selected - only added. So now I have the following code selecting the data when the buttons in the centered are used.

var elOptNew = document.createElement('option');
elOptNew.text = skills.options[i].text;
elOptNew.value = skills.options[i].value;
elOptNew.selected = true;
var selectedSkillList = document.getElementById('SELECTED_SKILLS');
		
try
{
selectedSkillList.add(elOptNew, null);
}
catch(ex) 
{
selectedSkillList.add(elOptNew);
}	

Code (markup):

The only problem now occurs when a user clicks on one of the fields on the right to move an item back to the left to deselect items. When this happens, the fields on the right get deselected.

Sincerely,
Travis Walters

 

Hello again,

I think everytime I write on here I think of an answer within five minutes. I guess it is one of those nights.

In case anybody else ever has this issue, I found a way to take care of this with a little javascript.

function submitForm()
{
  var categories = document.getElementById('SELECTED_CATEGORIES');
	
  for (var i=categories.length-1; i>=0; i--)
  {
    categories.options[i].selected = true;	
  }
	
  var subcategories = document.getElementById('SELECTED_SUBCATEGORIES');
	
  for (var i=subcategories.length-1; i>=0; i--)
  {
    subcategories.options[i].selected = true;	
  }

  var skills = document.getElementById('SELECTED_SKILLS');
	
  for (var i=skills.length-1; i>=0; i--)
  {
    skills.options[i].selected = true;	
  }
	
  document.createProjectForm.submit();
}

Code (markup):

My only concern now is whether this form is too advanced for software buyers. What are your thoughts on this looking at the graphic I uploaded in my previous post?

I should probably create a non-javascript form as well, and maybe have a button that redirects the user there if he / she thinks it is too complicated. It seems simple to me but I am not sure what others will think.

Sincerely,
Travis Walters