JavaScript set choosers with Makumba

When you have a set, mak:input will generate a list of values to choose from. To make the choice easier, you sometimes need to use two select boxes whereby the user can move items from one box to the other. Example: (download example)

How to do this in your pages:

Download the script makumbaSetChooser.js and save it in your web application
Include the script in your page. You can do that in two ways:

If you have access to the page header use javascript include

<head>
...
<script type="text/javascript" src="makumbaSetChooser.js"></script>
...
</head>

When the page header is not in the JSP you work with and you want to keep everything close to the form which contains the chooser you can include the script server side, like this

<SCRIPT LANGUAGE="JavaScript">
<%@include file="makumbaSetChooser.js" %>
</script>

Say you have a form that contains a set input as follows

<mak:...form ...>
<mak:input name="fieldName"/>
<input type="submit">
</mak:...form>

Now you can enhance the form as follows.
Add the following items to the form. Change the names in bold to adapt the example to your situation.

<mak:...form ... name="myForm">

<!-- an empty list for the non selected values and give a name, e.g., "selectFrom" -->
<select multiple size="5" name="selectFrom"></select>

<!-- the buttons to move the items -->
<input type="button" onClick="move(this.form.selectFrom,this.form.fieldName)" value="add">
<input type="button" onClick="move(this.form.fieldName,this.form.selectFrom)" value="remove">

<!--  the original mak:input -->
<mak:input name="fieldName" ...>

<!-- buttons for changing the order, if needed -->
<input type="button" value="Move up" onclick="Moveup(this.form.field1)">
<input type="button" value="Move down" onclick="Movedown(this.form.field1)">

<!-- submit button -->
<input type="submit" onClick="javascript:highlightAll(this.form.fieldName);">

</mak:...form>

<!-- code that initialises the select boxes -->
<SCRIPT LANGUAGE="JavaScript">
<!-- //Begin
moveNotSelected(document.forms['myForm'].fieldName,document.forms['myForm'].selectFrom)
//  End -->
</script>