reorder jQueryを使用してDivを作成し、フォーム投稿を使用して送信

Question

jQueryを使用してアイテムを並べ替えても問題なく動作しますが、DIVとフォームアクションポストを使用して最終注文を送信するにはどうすればよいですか？

私はこのようなチェックボックスでそれを行う方法を知っている...

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

....

<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" 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> 

これは、チェックボックスのために完全に正常に動作しますが、私はちょうどに何をしたい場合代わりに通常のDIVを使用し、divのinnerTextまたはinnerHtmlを渡しますか？たとえば、私は

<ol id="sortable"> 
    <li><label for=""><div name="resortable-option[]">Option 1</label></li> 
    <li><label for=""><div name="resortable-option[]">Option 2</label></li> 
    <li><label for=""><div name="resortable-option[]">Option 3</label></li> 
    <li><label for=""><div name="resortable-option[]">Option 4</label></li></ol> 

その後、

私は、彼らがそのように私はキャッチすることができますreorderdされた後、それは彼らを提出する提出ヒット...順序で出力エコーとして

Option 1 
Option 2 
Option 3 
Option 4 

...持っていた場合、彼ら並べ替えられました。

Answer 1

私はそのように舞台裏でフォームのHTMLをアセンブルし、提出することである方法を知っている唯一の方法：

$(document).ready(function(){ 
    $('#submit').click(function(){ 
     // I'll use this as a class selector and as the name for the form attr 
     var inputName = 'resortable-option'; 
     // Get all elements with the class 
     var getFields = $('.'+inputName); 
     // Start the form 
     var post  = ['<form action="/test.php" method="post">']; 
     // Loop through the divs 
     $.each(getFields,function(k,v) { 
      // Create inputs 
      post.push('<input name="'+inputName+'['+k+']" value="'+$(v).text()+'" />'); 
     }); 
     // Add an ending to the form 
     post.push('</form>'); 
     // String the array together and submit 
     $(post.join('')).submit(); 
    }); 
}); 
</script> 

<ol id="sortable"> 
    <li><label for=""><div class="resortable-option">Option 1</div></label></li> 
    <li><label for=""><div class="resortable-option">Option 2</div></label></li> 
    <li><label for=""><div class="resortable-option">Option 3</div></label></li> 
    <li><label for=""><div class="resortable-option">Option 4</div></label></li> 
</ol> 
<div id="submit">SUBMIT</div> 

を