title: How to use ajax to populate input with select option with data from database?
body: <p>The question I've got in my test goes like so.</p>
  
  <p>You have 1 select with 2 options(item number1 and item number2) and 2 input fields(price,weight). How would you make the input fields change without writing in them?</p>
  
  <p>So after a long time of searching and trying stuff out (without much luck) I've learned that I need to use ajax for this to work. so I have tried a bunch and this is the code I've tried edit so it would work.
  <code>getAllproduct</code> is just a select that fetches all the data inside my table with products. this is <code>id, name, item_number, price, weight</code>. anyhow here is my code</p>
  
  <pre><code>&lt;?php
      $sth = $db-&gt;prepare("SELECT `price`,`weight` FROM product");
      $sth-&gt;execute();
      $row = $sth-&gt;fetch(PDO::FETCH_ASSOC);
      $row = array();
      json_encode($row);
  ?&gt;
  </code></pre>
  
  <p><code>product.php</code>
      
      </p>
  
  <pre><code>&lt;div class="form-group col-2"&gt;
      &lt;label for="product"&gt;Item number&lt;/label&gt;
      &lt;?=@$error['product']?&gt;
      &lt;select class="form-control" name="product" id="product" onChange="getproduct(this.value)"&gt;
          &lt;?php foreach ($csv-&gt;getAllproduct() as $csv) { ?&gt;
          &lt;option value="&lt;?= @$csv-&gt;id ?&gt;" selected&gt;&lt;?= @$csv-&gt;product?&gt;&lt;/option&gt;
          &lt;?php } ?&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group col-2"&gt;
      &lt;label for="weight"&gt;weight&lt;/label&gt;
      &lt;?=@$error['weight']?&gt;
      &lt;input type="text" name="weight" id="weight" class="form-control"&gt;
  &lt;/div&gt;
  &lt;div class="form-group col-2"&gt;
      &lt;label for="price"&gt;price&lt;/label&gt;
      &lt;?=@$error['price']?&gt;
      &lt;input type="text" name="price" id="price" class="form-control"&gt;
  &lt;/div&gt;
  
  &lt;div class="input-group"&gt;
      &lt;button type="submit" style="margin-left:15px; margin-bottom: 15px; z-index: 5" class="btn btn-success" value="Opret" name="btn_opret_maal"&gt;Submit&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;script&gt;
  function getproduct(val){
  $.ajax({
      type:"POST",
      url:"pages\call.php",
      data: 'product='+val,
      success: function(response){
          var result = JSON.parse(response);
          if (result.response == true) {
              var data = result.rows;
              $("#weight").val(data[0].weight);
              $("#price").val(data[0].price);
          }else if (result.response == false) {
              $('#product').append('&lt;option&gt;No products were found!&lt;/option&gt;');
          }
      }
  });
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>What I expect to be able to do is select an item number and it will automatically populate the inputfields price and weight with the data inside the database from the item number.</p>
  
  <p>I haven't learned a lot of Ajax/js so Any help is appreciated.</p>
  
  <p><strong>Attempt</strong>: on other project using this code. havent gotten it to work yet.</p>
  
  <pre><code>&lt;form class="row" method="POST" &gt;
  &lt;div style="border-color:#dddddd;" class="dropdown-divider col-12"&gt;&lt;/div&gt;
  
  &lt;script&gt;$('#Varenummer').on('change', function() {
      var selectedOption = $(this).find('option:selected');
      $('#Tolminus').val(selectedOption[0].dataset.Tolminus);
      $('#Tolplus').val(selectedOption[0].dataset.Tolplus);
      });
  &lt;/script&gt;
  
  &lt;div class="form-group col-2"&gt;
      &lt;label for="Varenummer"&gt;Varenummer&lt;/label&gt;
      &lt;?= @$error['Varenummer'] ?&gt;
      &lt;select class="form-control" name="Varenummer" id="Varenummer"&gt;
  &lt;?php
  foreach ($csv-&gt;getAllVarenummer() as $csv) {?&gt;
          &lt;option value="&lt;?= @$csv-&gt;id ?&gt;" data-Tolminus="&lt;?= @$csv-&gt;Tolminus ?&gt;" 
  data-Tolplus="&lt;?= @$csv-&gt;Tolplus ?&gt;"&gt;&lt;?= @$csv-&gt;Varenummer ?&gt;&lt;/option&gt;
  &lt;?php }?&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group col-2"&gt;
      &lt;label for="Tolminus"&gt;Tol -&lt;/label&gt;
      &lt;?= @$error['Tolminus'] ?&gt;
     &lt;input type="text" name="Tolminus" id="Tolminus" class="form-control" value=""&gt;
  &lt;/div&gt;
  &lt;div class="form-group col-2"&gt;
      &lt;label for="Tolplus"&gt;Tol +&lt;/label&gt;
      &lt;?= @$error['Tolplus'] ?&gt;
     &lt;input type="text" name="Tolplus" id="Tolplus" class="form-control" value=""&gt;
  &lt;/div&gt;
  
  &lt;div class="input-group"&gt;
      &lt;button type="submit" style="margin-left:15px; margin-bottom: 15px; z-index: 5" class="btn btn-success" value="Opret" name="btn_opret_maal"&gt;Submit&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>the jquery scrips and others are added in the footer.</p>