title: Loading JSON data with jQuery, PHP and MySQL for radio buttons
body: <p>I'm trying to populate a third set of radiobuttons as an addition to the following script: <a href="http://www.electrictoolbox.com/json-data-jquery-php-radio-buttons/" rel="nofollow">http://www.electrictoolbox.com/json-data-jquery-php-radio-buttons/</a></p>
  
  <p>For some reason I cannot seem to fill the third set with the corresponding data. It just stays blank :(</p>
  
  <p>Calling the  <code>populateFruittype()</code> function only gives back <code>[ ]</code>, while <code>populateFruitVariety()</code> returns the json data correctly. </p>
  
  <p><strong>getdata.php (DB connection  / fetching data)</strong></p>
  
  <pre><code>&lt;?php
  
  $dsn = "mysql:host=localhost;dbname=mydb";
  $username = "username";
  $password = "password";
  $pdo = new PDO($dsn, $username, $password);   
  
  $rows = array();
  
  if(isset($_GET['fruitName'])) {
      $stmt = $pdo-&gt;prepare("SELECT DISTINCT variety FROM fruit WHERE name = ? ORDER BY variety");
      $stmt-&gt;execute(array($_GET['fruitName']));
      $rows[] = $stmt-&gt;fetchAll(PDO::FETCH_ASSOC);
  }
  
  if(isset($_GET['fruitVariety'] )) {
      $stmt = $pdo-&gt;prepare("SELECT DISTINCT fruittype FROM fruit WHERE variety = ? ORDER BY fruittype");
      $stmt-&gt;execute(array($_GET['fruitVariety']));
      $rows[] = $stmt-&gt;fetchAll(PDO::FETCH_ASSOC);
  }
  
  echo json_encode($rows);
  
  ?&gt;
  </code></pre>
  
  <p><strong>HTML</strong></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;title&gt;Toevoegen&lt;/title&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;script language="javascript" type="text/javascript"&gt;
  
          function populateFruitVariety() {
  
              var fruitName = $('input[name=fruitName]:checked').val();
  
              $.getJSON('getdata.php', {fruitName: fruitName}, function(fruit) {
  
                  var html = '';
                  $.each(fruit, function(index, array) {
                      html = html + '&lt;label&gt;&lt;input type="radio" name="fruitVariety" value="' + array['variety'] + '" /&gt;' + array['variety'] + '&lt;/label&gt; ';
                  });
                  $('#varieties').html(html);
  
              });
  
          }
  
          function populateFruittype() {
  
              var fruitVariety = $('input[name=fruitVariety]:checked').val();
  
              $.getJSON('getdata.php', {fruitVariety: fruitVariety}, function(fruit) {
  
                  var html = '';
                  $.each(fruit, function(index, array) {
                      html = html + '&lt;label&gt;&lt;input type="radio" name="fruitType" value="' + array['fruittype'] + '" /&gt;' + array['fruittype'] + '&lt;/label&gt; ';
                  });
                  $('#fruittype').html(html);
  
              });
  
          }
  
          $(function() {
              $('input[name=fruitName]').change(function() {
                  populateFruitVariety();
              });
          });
  
          $(function() {
              $('input[name=fruitVariety]').change(function() {
                  populateFruittype();
              });
          });
  
  
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  
  &lt;form&gt;
  
      &lt;div&gt;
          &lt;strong&gt;Fruit:&lt;/strong&gt;
          &lt;label&gt;&lt;input type="radio" name="fruitName" value="Apple"/&gt;Apple&lt;/label&gt;
          &lt;label&gt;&lt;input type="radio" name="fruitName" value="Banana"/&gt;Banana&lt;/label&gt;
          &lt;label&gt;&lt;input type="radio" name="fruitName" value="Orange"/&gt;Orange&lt;/label&gt;
          &lt;label&gt;&lt;input type="radio" name="fruitName" value="Pear"/&gt;Pear&lt;/label&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;strong&gt;Variety:&lt;/strong&gt;
          &lt;span id="varieties"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;strong&gt;Type:&lt;/strong&gt;
          &lt;span id="fruittype"&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The DB query and content can be found here: <a href="http://www.electrictoolbox.com/mysql-example-table/" rel="nofollow">http://www.electrictoolbox.com/mysql-example-table/</a></p>
  
  <p>Just add: </p>
  
  <pre><code>`fruittype` varchar(50) NOT NULL
  </code></pre>
  
  <p>and fill it with some custom values.</p>