title: Updating form field base on selected item from drop down (jquery, PHP & MySQL)
body: <p>I have a database table that holds booking extras in the format:</p>
  
  <pre><code>name:price
  </code></pre>
  
  <p>I get a PHP array of the booking extras from the database and create a select box containing their names and also display a price field:</p>
  
  <pre><code>&lt;label class="label"&gt;Name&lt;/label&gt;
  &lt;label class="select"&gt;
    &lt;select id="name" name="name"&gt;
    &lt;?php 
  foreach ($upsells as &amp;$upsell) {
    echo '&lt;option value="'.$upsell['name'].'"&gt;'.$upsell['name'].'&lt;/option&gt;';
  }
    ?&gt;
    &lt;/select&gt;
  &lt;/label&gt;
  &lt;label id="pricet" class="label" style="display:none;"&gt;Price&lt;/label&gt;
  &lt;label class="input" id="price" style=""&gt;
    &lt;input class="" id="price" type="text" pattern="\d+(\.\d{2})?" name="price" value="" &gt;
  &lt;/label&gt;
  </code></pre>
  
  <p>I am trying to get the price box to auto update with the correct price associated with the item name when it is selected from the select box.</p>
  
  <p>Using jquery, I have:</p>
  
  <pre><code>$(document).ready(function() {
    $("#name").change(function () {
      var choice = jQuery(this).val();
      $.ajax({
        url:'/get_upsell.php?pid=&lt;?php echo $urlcrypt-&gt;encrypt($pid);?&gt;',
        type:'GET',
        data : {'id' : choice},
        success : function(response) {
        $('input[name="name"]').val(response.name);
        $('input[name="price"]').val(response.price);
        }
      });
    });
  })
  </code></pre>
  
  <p>And get_upsell.php</p>
  
  <pre><code>if (isset($_GET['pid'])){
    $pid = $urlcrypt-&gt;decrypt($_GET['pid']);
  }
  
  $jsonupsells = $users-&gt;get_upsells_ajax($pid);
  
  $indexedOnly = $jsonupsells;
  
  foreach ($associative as $row) {
    $indexedOnly[] = array_values($row);
  }
  
  return json_encode($indexedOnly);
  </code></pre>
  
  <p>The json string is created when I call get_upsells.php (I checked manually) but I cant see any ajax request coming from the browser when selecting an item.</p>
  
  <p>Where have I gone wrong?</p>
  
  <p>EDIT: Found a missing , after the 'GET'. I am now seeing the ajax requests but cant work out how to update the "price" form field.</p>
  
  <p>EDIT: JS function now looks like this:</p>
  
  <pre><code>$(document).ready(function() {
    $("#name").change(function () {
      var choice = jQuery(this).val();
      $.ajax({
        url:'/get_upsell.php?pid=&lt;?php echo $urlcrypt-&gt;encrypt($pid);?&gt;',
        type:'GET',
        data : {'id' : choice},
        success : function(response) {
          response = jQuery.parseJSON(response);
          $('input[name=price]').val(response.price);
        }
      });
    });
  })
  </code></pre>
  
  <p>And changed database query so it only returns the values for the selected item based on item id. Also changed "return" to "echo".</p>
  
  <p>Still no updating of the price field.</p>
  
  <p>UPDATE:</p>
  
  <p>changed the function to:</p>
  
  <pre><code>$('#price').val('Hello');
  </code></pre>
  
  <p>And that populates the price field with 'Hello' so it looks like the...</p>
  
  <pre><code>response.price
  </code></pre>
  
  <p>...bit is not passing the data.</p>