Multiple Selection of FOrm elements: Shift or Ctrl Selection of items in a page of a form

  • Profile Image
    John
    Asked on November 12, 2011 at 07:53 PM

    Is it possible to have items that you can select or deselect in a form that are reserved as a user moves along the form path?

    For example, Page 1 of the form would be 12 images of coffee mugs in an HTML table with the instructions 'Choose the coffee mugs you'd like to buy'. The user would be able to select and deselct any coffee mug in the table by holding down the CTRL key on their keyboard and clicking with their mouse, or holding down the shift key to select multiple items in succession also using the mouse pointer

    If this is nto doable, are there other suggestions? The only other thing I could think of old school is check boxes, but I'd like to stay away from that if at all possible.

  • Profile Image
    abajan
    Answered on November 13, 2011 at 09:51 AM

    It's news to me that check boxes are "old school". To my knowledge, they are quite widely used and certainly ideal for your requirement. Nevertheless, if you really need to be rid of them, I suppose the best method would be to just hide them by injecting either of the following CSS rules:

    .form-checkbox {display:none;}
    or
    .form-checkbox {visibility:hidden;}

    (Here's the difference)

    Next, some sort of JavaScript toggle function would need to be associated with each check box so that when its associated image is clicked, something about its appearance changes (for example, a border is added or its colors, muted by default, become brighter) and reverts to its default state when clicked again.

    Would such a solution be suitable for your purposes?

    Incidentally, there would be no need for users to use the [Ctrl] and/or [Shift] keys with this method.

  • Profile Image
    abajan
    Answered on November 13, 2011 at 11:21 PM

    The form embedded on this page illustrates what I mean. But there's a problem: Neither IE 8 nor Opera 11 displays the crucial pink dashed border when fruit are selected (clicked). Hopefully, one of my colleagues can spot the error(s) in my code and provide you with the proper solution.