Question

I have a multi-select Box and I’m doing some javascript to sort the order of the elements in the box. I want to submit the whole array after sorting back to the Java and not just the select items. How can I achieve this?

JSP:

<script type="text/javascript">  
    $(document).ready(function(){   
        $("#mup")[0].attachEvent("onclick", moveUpItem);    
        $("#mdown")[0].attachEvent("onclick", moveDownItem);    
    });   

    function moveUpItem(){  
        $('#list option:selected').each(function(){    
            $(this).insertBefore($(this).prev());   
        });  
    }   

    function moveDownItem(){    
        $('#list option:selected').each(function(){    
            $(this).insertAfter($(this).next());   
        });   
    }       
</script> 



<table width="100%">
    <tr>
        <td width="50%" align="center">
            <h1>DET Column Maintenance</h1>
        </td>
    </tr>
</table>

<form action="process.det_column_order" method="post" name="detColumnSortorder" >
    <table class="data_table">
        <tr align="center">
            <td>
                <select id="list" name="fieldNames" size="35" multiple="multiple" style="width: 250px;">
                    <c:forEach var="field" items="${detFields}">
                        <option value="${field.fieldName}">${field.displayName}</option>
                    </c:forEach>
                </select>
            </td>
        <tr>
            <td style="text-align: center;">
                <button id="mup">Move Up</button>&nbsp;&nbsp;&nbsp;
                <button id="mdown">Move Down</button>
            </td>
        </tr>
        <tr>
            <td style="text-align: center;">
                <input name="action" type="submit" value="Submit"/>
            </td>
        </tr>
     </table>   
 </form>

FORM:

 private String[] fieldNames;
public String[] getFieldNames() { return this.fieldNames; }
            public void setFieldNames(String[] val) { this.fieldNames = val; }

Answer 1

Since forms only submit the selected values, you’ll need a little more JS and another form field.

Introduce a hidden form field that will hold the values you care about:

<input type="hidden" name="fieldNamesOrder" id="fieldNamesOrder"/>

And after every click of Move Up/Move Down:

var order = [], sel = document.getElementById("list");
for(var i = 0, len = sel.options.length; i < len; i++) {
    order.push(sel.options(i).value);
}
document.getElementById("fieldNamesOrder").value = order.join(",");

Then, on the server side, you can read your ordered field names out of that posted field.