Justin McCandless

code: http://github.com/justinmc/Rank-Form

demo: www.justinmccandless.com/demos/Rank-Form/index.html

I wrote this quick open source project to be a nice way to allow users to rank a series of options in an HTML form.  It just uses jQuery in addition to simple HTML and CSS.  Here’s an example of how it works:

You can use the arrows to swap options up and down on the list, and a nice animation moves them for you and changes the numerical rank.  It uses an automatically updated hidden input for each option, so you can stick this directly in a form and use it right away.  Of course everything is scalable and customizable so it's easy to change the look of things or the number of options.

This is a huge step up from a simple form to select rank:

1

2

3

4

5

Bronze

1

2

3

4

5

Platinum

1

2

3

4

5

Gold

1

2

3

4

5

Silver

1

2

3

4

5

Diamond

Besides the fact that this plain HTML version is really ugly, it is also possible for the user to select the same rank for multiple options.  You'll have to validate that after the user submits, which is a bit more annoying.

Anyway I hope it helps someone, feel free to contribute on github if you think it could be improved.

code: https://github.com/justinmc/Rank-Form

demo: www.justinmccandless.com/demos/Rank-Form/index.html