title: Sending HTML Form Multiple <select> box via POST request with AJAX?
body: <p>I have an html form with a multiple select box. I can't figure out how to send the values to my php application with AJAX via a post request.  It works just fine if I use a GET request and use a single select box but not when I use a multiple select box. The idea is for users to hold control (or command with mac) and select one or more categories. Depending on which categories are selected will determine what other form options will be displayed using AJAX. The select box looks like this:</p>
  
  <p><strong>Edit: SOLVED</strong></p>
  
  <pre><code>&lt;select multiple name="categories[]" onclick="sendCategories(this)"&gt;
  &lt;option value="0"&gt;Category 1&lt;/option&gt;
  &lt;option value="1"&gt;Category 2&lt;/option&gt;
  &lt;option value="2"&gt;Category 3&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>My javascript function looks like this:</p>
  
  <pre><code>function sendCategories(sel){
      if (window.XMLHttpRequest)
      {
          xmlhttp=new XMLHttpRequest();
      }
      else
      {
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange=function()
      {
          if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)
          {
              document.getElementById("my_div").innerHTML=xmlhttp.responseText;
          }
      }
      xmlhttp.open("POST","http://www.mysite.com/update_categories.php",true);
      xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      var values = $(sel).serialize();
      xmlhttp.send(values);
  }
  </code></pre>