PHP/Codeigniter processing a list with javascript

Question

I have a list of items that the user can select. I want it to be more user friendly than standard checkboxes so I have seperate div's each with a unique id.

When user clicks an item, I use javascript to display a tick on top of that item and change the style to show that it is highlighted.

Im trying to work out how I can pass the list of id's when the form is submitted. Remember, if the user unticks an item, it should be removed from the list, I was thinking of using comma seperated values in a hidden text field but couldnt work out how to remove items from the start of the list if they were deselected

Answer 1

Make your style toggling function aslo toggle values in hidden fields.

Answer 2

You could store your list of selected items in a javascript array and, like Babiker said, when you toggle your style, also add or remove the element to/from the array. Then when you submit the form write a piece of javascript that plugs the array data into a hidden field.

Also if you're speaking in terms of straight up user friendliness, just a bit of advice I've learned over the years is that people are actually quite used to checkboxes and they provide the highest level of comprehension to the user. It's tried and true. So unless you're shooting for a specific design need I would stick with checkboxes.

Answer 3

As already stated, use a javascript array to store toggled list options. Then bind to the submit from event a function that converts the array into a comma separated string (you can use the javascript join() method) and assigns the string to a hidden form field

reference: http://www.w3schools.com/jsref/jsref_join.asp