views:

75

answers:

3

Hey all,

I need to allow users to choose/input authors associated with a given publication and there could be just a single author or (43 = the most I have seen so far) up to 40+. Needless to say creating a static form to collect the data will not do since there is no way to know ahead of time how many authors there are.

My original plan was to use a multi-select box that is pre-populated (dynamically) with a list of current employees that could potentially be authors. This is all fine and good EXCEPT for the fact that authors need to have an "order" associated with them so that they get proper credit for first author, second author, etc ... Given this little detail using a multi-select by itself will not work. I have thought about just doing something in which table rows are added dynamically but even with that approach the thought of a 40+ row table just for author input is somewhat nausiating.

Does anyone have any clever ideas on how to handle this?

A: 

look at realisation of tags here on Stack Overflow. maybe it is what you need

valya
+1  A: 

You could use a dual draggable / sortable list control like this. The list on the left would be "all authors" and on the right would be "authors associated with this publication".

In the example I linked to you can sort the left hand list as well as moving items between lists, but I'm sure you could disable that.

Greg
Greg: From a UI standpoint I absolutely love that however what is ultimately created by that? An ordered list? I need something that will be part of the $_POST array when the form is submitted. That is why the multi-select was perfect because it just adds a child array to the $_POST array.
Nicholas Kreidberg
You can easily serialize the results to a hidden field
Greg
Greg: Sorry I am not familiar with that, how do I "serialize" the entire contents of a <ul> thus leaving me with hidden form fields to pass the data?
Nicholas Kreidberg
If you use the jQuery one I linked to it has a serialize method: http://jqueryui.com/demos/sortable/#method-serialize
Greg
Definitely a nice approach, the only question that remains is what would be a good way to display the <ul> with a scroll bar? There are over 500 people in the list that can be dragged over so I need to come up with a way to contain this list in a smaller space (like a multi-select does), any ideas or am I stuck doing something with an iframe?
Nicholas Kreidberg
You need to break them down somehow. Perhaps a set of tabs for A, B, C, ...?
Greg
A: 

Option 1: Ask for the number of authors before, then automatically build that form for each user

Option 2 (more work, in my opinion better usability): Your form has initially two entries. If the first is filled, a third appears. If the second is filled, a fourth appears. If the n'th is filled, the (n+2)th appears, until the user is done. A "More Authors..." button or something should be strategically placed to give the user who sees the form for the first time an idea that there can be more than two authors. Maybe it's better to write "Start filling for more author slots to appear", but that seems way too many words.

Emilio M Bumachar
Emilio: So just do something like use jQuery's clone method to clone the previous table row and set the names to nameX+1 or something? That could work, I just wanted to avoid having a form that is incredibly long (vertically) but I suppose it would start out at a very decent height and just grow based on input. This approach could work, thank you.
Nicholas Kreidberg