Ranked preference in an HTML form?

October 31, 2007 9:02 AM

Is there a way to rank choices or preferences for a question in a HTML form?

I'm trying to build a HTML form that will allow a user to rank their responses. For example, if I ask what their favorite color is:

A. Red
B. Blue
C. Green
D. Yellow

... I would like to know that their order of preference is C, A, D, then B.

Any ideas? I've been searching, but I'm either coming up blank or searching for the wrong combination of words.

posted by jmevius to computers & internet (12 comments total)

Hmm... I don't know of any pre-built way of doing this. You'll probably have to custom code something.

One possible solution:

Create the form with N dropdown boxes, where N is the number of items to choose from, in this case N = 4.

Initially, all but the first drop down is invisible. The user puts their first choice in the first box. When you detect that it has changed, you remove that choice from each of the remaining N-1 boxes and make the second box visible. Rinse and repeat.
posted by jeffamaphone at 9:13 AM on October 31, 2007

Another solution is to have a multi-select listbox and up/down buttons. The up/down buttons move whatever is currently selected up or down. When they click submit, you take the order the items are in the listbox as the preference order. Be sure to indicate that up is the mostest and down is the leastest.
posted by jeffamaphone at 9:15 AM on October 31, 2007 [1 favorite]

Radio buttons?

Red (X) 1 ( ) 2 ( ) 3 ( ) 4
Green ( ) 1 (X) 2 ( ) 3 ( ) 4
Yellow ( ) 1 ( ) 2 (X) 3 ( ) 4
Blue ( ) 1 ( ) 2 ( ) 3 (X) 4

It doesn't idiot-proof the results, i.e., someone could fill in "1" for all four of them, etc.
posted by WCityMike at 9:16 AM on October 31, 2007

You can do it with each item having a dropdown with all the numbers. If you need it to be right, you will have to write in validation to make sure they only chose 1 once, etc. Pain in the ass (though someone somewhere has surely put their code online if you can hit the right search terms), but that's how we did it writing market research questionnaires.
posted by Lyn Never at 9:33 AM on October 31, 2007

You can group radio buttons so that a person can only select one of them. So create 4 groups, with a group being "rank #1" for each option, etc.
posted by signal at 9:37 AM on October 31, 2007

Check out this:
http://tool-man.org/examples/sorting.html
posted by ManInSuit at 9:40 AM on October 31, 2007

There is no temporal axis in HTML form elements.

Make it a series of web pages.

Choose your favorite: [1] [2] [3] [4]

(choose 2)

Order: 2 ...
Choose your favorite: [1] 2 [3] [4]

(choose 3)

Order 2, 3 ...
Choose your favorite: [1] 2 3 [4]


Or, do the same in Javascript.
posted by cmiller at 10:18 AM on October 31, 2007

To complement ManInSuit's suggestion, here's sortable lists at Scriptalicious.
posted by adamrice at 11:00 AM on October 31, 2007

It's "script.aculo.us", but adamrice has nailed it. Drag-and-drop reordering, it's great and easy to implement.
posted by mkultra at 11:39 AM on October 31, 2007

The script.aculo.us solution does seem pretty elegant. I'll have to try it out.

Anyone tried it with form data?
posted by jmevius at 11:48 AM on October 31, 2007

By "form data", do you mean "enter 5 items and re-order them"? That should be doable. script.aculo.us works at the DIV level, so if you encase each INPUT element within a uniquely-named DIV, you should be able to string the two parts together.

Though, from a usability perspective, if your users are entering the data this way, you'll probably save yourself a lot of grief and effort by just telling them to enter the items in order.
posted by mkultra at 12:29 PM on October 31, 2007

If you're just wondering how the data gets passed in a form, it's got its own methodology for it. Check the docs.
posted by mkultra at 12:35 PM on October 31, 2007