title: Can't get post data from jQuery UI sortable (sent to the same file)
body: <p>I have a little quiz written in php with questions of two types : single choice answer via radio buttons and multiple choice answers via checkboxes. The code run in a single file ("quiz.php") that handles the display of the questions as well as the treatment of the answers.</p>
  
  <p>Everything was working smoothly until I had to add a third type for "sortable list" of answers --where people have to re-order a list of choices.</p>
  
  <p>After some research, I've found what I think is the answer : the "sortable" interaction of jQuery UI. Simple, straightforward and easy to implement… even if I can't seem to make it work !</p>
  
  <p>My problem is that if I know a little bit of PHP/MySql, I know very little of Javascript and certainly not know enough to write or debug it properly. </p>
  
  <p>Here's the code, starting with all the php for the display of questions and the process of the answers : </p>
  
  <pre><code>// File quiz.php
  &lt;?php session_start();
  
  // if the form has just been submitted, handle the answers
  if (isset($_POST['submit'])) {
  
  // Do something, on a case by case basis :
      switch ($_SESSION['questionType']) {
      case 1 : // for radio buttons
          // some code to process and save the answer to the database
      break ;
      case 2 : // for checkboxes
          // some code to process and save the answer to the database
      break ;
      case 3 : // for sortable lists
          // some code to process and save the answer to the database
      break ;
      }
    }
  // Here, get the elements to show from the DB, including
  // the question type for the switch below 
  // questionType = 1 for single choice answer
  // questionType = 2 for multiple choice answer
  // questionType = 3 for sortable choice answer
  ?&gt;
  </code></pre>
  
  <p>Next, the html to display the questions :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; 
    &lt;title&gt;Quiz&lt;/title&gt; 
  &lt;link rel="stylesheet" href=./quiz.css"&gt;
     &lt;script src="./js/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
     &lt;script src="./js/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt; 
      &lt;?php // A bunch of code to echo the question ?&gt;
  
      &lt;form action="quiz.php" method="POST"&gt;
   &lt;?php  // A switch to adapt the display to the type of questions :
      switch ($_SESSION['questionType']) {
          case 1 : // for single choice answer
              // A bunch of code to echo the possible choices w/ radio buttons
          break ;
          case 2 : // for multiple choice answer
              // A bunch of code to echo the possible choices w/ checkboxes
          break ;
          case 3 : // for sortable lists ?&gt;
      &lt;!-- the following would normaly be generated via php with info from the DB  --&gt;
      &lt;ul id="sort"&gt;
        &lt;li id="choice_1"&gt;Item 1&lt;/li&gt;
        &lt;li id="choice_2"&gt;Item 2&lt;/li&gt;
        &lt;li id="choice_3"&gt;Item 3&lt;/li&gt;
        &lt;li id="choice_4"&gt;Item 4&lt;/li&gt;
        &lt;li id="choice_5"&gt;Item 5&lt;/li&gt;
      &lt;/ul&gt;
  &lt;?php   break ; ?&gt;
  &lt;?php  } ?&gt;
      &lt;input type="submit" name="submit" value="Submit"&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>and this is where it breaks</p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
    $(function() {
      $("#sort").sortable({
        var newOrder = $(this).sortable('serialize'); 
        // the 'quiz.php' file called below is the one we're in
        $.post('quiz.php', {sort: newOrder };
      });
      $("#sort").disableSelection();
    });
      &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What has me stumped is that not only is the result not sent to $_POST after the form has been submitted --so nothing happens-- but the 2 lines of code inside the $("#sort").sortable() function breaks the interaction behavior completely i.e the list isn't sortable AND the text can be selected. </p>
  
  <p>Any hint, help ?</p>
  
  <p>[EDIT] : Thanks to Jordan, I've got the sortable part runing but the data still isn't being sent. </p>
  
  <p>The code in use now : </p>
  
  <pre><code>  &lt;script type="text/javascript"&gt;
     $(function() {
      $('#sort-form').on('submit',function(event){
          // Prevent the form from being submitted normally
          event.preventDefault();
          var newOrder = $(this).sortable('serialize');
          $.post('quiz.php', {sort: newOrder };
      }); 
   &lt;/script&gt;
  </code></pre>
  
  <p>doesn't result in anything, with the console in Chrome now saying that there is an "Uncaught SyntaxError : Unexpected end of input" juste before the closing  tag. 
  I don't know if it's relevant or not but it has me thinking that
  either I'm missing a typo somewhere or the function needs more arguments… </p>
  
  <p>[EDIT 2] Replaced the "-" on the <code>&lt;li&gt;</code> id's with underscores (more compliant w/ jQuery UI guidelines)</p>