I was building a form the other day and was adding items dynamically. I wanted to be able to drag and sort my items as I was building the form.
Now, all this is very easy to do with jQuery but my problem was that I needed my item id’s to be persistent. I needed a way to store the position of the item when the user clicked the submit button.
I tried the interwebs but could only find bits of the solution. After a lot of searching I managed to solve my problem using parts from people’s answers to similar questions.
So, I would like to share my solution. I hope this is helpful for someone out there.
You will need the latest jQuery and the latest jQuery UI. If you have any questions about this just leave me a message and I will be glad to help you.
First off I need a form and a list to store my items. I am not going to implement my dynamic add feature because I think that’s beyond the scope of this article so lets keep this simple:
This is my form:
<form action="somescript.php" method="post" id="myForm" name="myForm">
<ul id="mySortable">
<li id="itemID3">
<input type="text" id='itemID[3][name]'/>
<input type="hidden" id="itemID[3][order]">
</li>
<li id="itemID12">
<input type="text" id='itemID[12][name]'/>
<input type="hidden" id="itemID[12][order]">
</li>
<li id="itemID1">
<input type="text" id='itemID[1][name]'/>
<input type="hidden" id="itemID[1][order]">
</li>
</ul>
<input type="submit" id"mySubmit" value="Submit" />
</form>
As you can see my id is important and needs to be preserved. I need to store the item order in the database so I am assigning it to a hidden input field. This hidden input field will be updated with the order in the list when the user clicks the submit button.
Now I need to add the jQuery code to enable Drag-and-Sort on my list. if you are already using jQuery in your project add this to your $(document).Ready if not add it to your header.
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$('#mySortable').sortable();
$('#mySortable').disableSelection();
});
});
</script>
Now we need to add a way to update our hidden input. The easiest way, is to do it, when we click Submit. So we just attach a click event to the submit button and add our code to capture the sort order.
<script type="text/javascript">
$(document).ready(function(){
$('#mySubmit').click(function(){
var mySort = $j('#mySubmit').sortable('toArray');
for(i=0; i < mySort.length; i++)
{
var itemNumber = mySort[i].replace('item','');
$('input#item\\[' + itemNumber + '\\]\\[order\\]').val(i);
}
return true;
});
$(function(){
$('#mySortable').sortable();
$('#mySortable').disableSelection();
});
});
</script>
Now let me explain what’s going on here. First I get an array of all the ID’s in the list, the index corresponds to their position in the list. For that we use var mySort = $j('#mySubmit').sortable('toArray');
Since my Item ID is related to its inputs ID’s e.g. item3 had child item[3][somefield] I obtain that number and use it to select my hidden input. please note that I am using \\ before [ and ]. The reason being is that in jQuery selectors those are special characters that need to be escaped.
Once I have selected the correct field and updated its value the loop moves to the next until all are updated. We can now return a true to let the form post to the appropriated script.
Leave a Reply