title: Send parameters to php with ajax call
body: <p>I have a html select list that I want to use to filter data in an li list. When user selects a list option the li list gets filtered based on the selection. all this data is stored in database. What I am trying to do is on change event in jquery check the value of selected option and then send that data to the server to use as a parameter for a query to the database.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;select id="universeList"&gt;
     &lt;option data-id="1"&gt;DC&lt;/option&gt;
     &lt;option data-id="2"&gt;Marvel&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;ul id="#heroesList"&gt;
    &lt;li&gt;Superman&lt;/li&gt;
    &lt;li&gt;Iron Man&lt;/li&gt;
    &lt;li&gt;SpiderMan&lt;/li&gt;
    &lt;li&gt;Captain America&lt;/li&gt;
    &lt;li&gt;Hulk&lt;/li&gt;
    &lt;li&gt;Batman&lt;/li&gt;
    &lt;li&gt;Flash&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(document).on("ready", function() {
  
    //ajax call to populate dropdown
     $.ajax({
          type: "GET",
          url: "getUniverseList.php",
          dataType: 'json',
          cache: false,
          success: function(results) {
              console.log(results);
              $.each(results, function(index, result) {
                  console.log(result);
  
                  $('#universeList').append('&lt;option data-id="'+result.universeID+'"&gt;'+result.universe+'&lt;/option&gt;');
  
  
              });
          }
      });
  
      //ajax call populate heroes list
      $.ajax({
          type: "GET",
          url: "getheroesList.php",
          dataType: 'json',
          cache: false,
          success: function(results) {
              console.log(results);
              $.each(results, function(index, result) {
                  console.log(result);
  
                  $('#heroesList').append('&lt;li data-id="'+result.heroesID+'"&gt;'+result.heroes+'&lt;/li&gt;');
  
  
              });
          }
      });
  
  $(document).on('change', '#universeList', function(){
      var universeSel = $('#universeList option:selected').data('id');
      $('#heroesList li').each( function() {
          $(this).remove();
      });
  
      console.log(manikinSel);
      $.ajax({
          type:"GET",
          url:"getheroesFilter.php",
          dataType: 'json',
          data: ( {name: universeSel} ),
          cache: false,
          success: function(results) {
  
              console.log(results);
  
  
      }
  
  });
  
  });
  
  });
  </code></pre>
  
  <p>PHP:</p>
  
  <pre><code>&lt;?php   
  
  //db information
  
  $mid = $_POST['manikinSel'];
  
  
  $sql = "Select universeID, heroesID From heroesmanikins bm 
      INNER JOIN heroesList b 
      ON bm.heroesId=b.heroesId
      INNER join heroessList m
      ON bm.universeID=m.universeId
      WHERE heroesID=`$mid`
      ";
  
  
   try {
  $dbh = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);  
  $dbh-&gt;setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  $stmt = $dbh-&gt;query($sql);  
  $stmt-&gt;execute();
  $employee = $stmt-&gt;fetchAll(PDO::FETCH_OBJ);
  $dbh = null;
  echo  json_encode($employee) ; 
  } catch(PDOException $e) {
  echo '{"error":{"text":'. $e-&gt;getMessage() .'}}'; 
  }
  
  ?&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/am1yyzb4/2/" rel="nofollow">fiddle</a></p>
  
  <p>I am using ID to match the tables and have ID as a data attribute to the option list. I want to send the ID for Universe back to php so it can be used to query matching ID's from the db tables.</p>
  
  <p>I cannot figure out why my 'data: ( {name: universeSel} )' is not sending the data to the server. </p>