将重新排序的列表的顺序提交给我的服务器

Question

Looking for a little help with this please:

I have implemented a drag & drop re-ordering feature in a survey i'm building, however i am unsure of how to submit the order of the list to my server once the user has re-ordered it.

Here is the JS for re-ordering:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script>
$(function() {
$(  "#sortable"  ).sortable();
$(  "#sortable"  ).disableSelection();
});
</script>

and the html:

<ol id="sortable">
<li><label for=""><input type="checkbox" name="resortable-option1" value="1">Option 1</label></li>
<li><label for=""><input type="checkbox" name="resortable-option2" value="2">Option 1</label></li>
<li><label for=""><input type="checkbox" name="resortable-option3" value="3">Option 1</label></li>
<li><label for=""><input type="checkbox" name="resortable-option4" value="4">Option 1</label></li></ol>

Answer 1

Here is an example using a form and submitting to PHP:

action page:

 <?php
    if(isset($_POST["resortable-option"])){
       foreach($_POST["resortable-option"] as $item){
         echo $item."<br>";
       }
    }
 ?>

HTML Form:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script>
   $(function() {
      $(  "#sortable"  ).sortable();
      $(  "#sortable"  ).disableSelection();
   });
</script>
<form action="ActionPage" method="post">
   <ol id="sortable">
   <li><label for=""><input type="checkbox" name="resortable-option[]" value="1">Option 1</label></li>
   <li><label for=""><input type="checkbox" name="resortable-option[]" value="2">Option 2</label></li>
   <li><label for=""><input type="checkbox" name="resortable-option[]" value="3">Option 3</label></li>
   <li><label for=""><input type="checkbox" name="resortable-option[]" value="4">Option 4</label></li></ol>
   <input type="submit" value="send">
</form>