title: Ajax & Laravel 8: select term + onchange event = show cost in input type number
body: <p>I'm trying to dynamically change <code>&lt;input type=&quot;number&quot; name=&quot;SLACost&quot; readonly&gt;</code> based on <code>&lt;select name=&quot;SLATerm&quot;&gt;</code> option</p>
  <p><a href="https://i.stack.imgur.com/liJ76.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/liJ76.png" alt="enter image description here" /></a></p>
  <p>A table (in DB) that contains:</p>
  <ul>
  <li>SLATerms.</li>
  <li>SLACost.</li>
  <li>SLADeduction</li>
  </ul>
  <p>that should be fetched in the &quot;Add new KPI Invoice&quot; form.</p>
  <p>I created a function in the controller to fetch the data as json:</p>
  <pre><code>/**
  ** KPI API
  **/
  public function fetchSLA()
  {
      $kpiTerms = KPITerms::all();
      return response()-&gt;json([
          'SLATermData' =&gt; $kpiTerms, // SLATermData is the name that will be used in Ajax.
      ]);
  }
  </code></pre>
  <p>created a url for ajax to fetch in the <strong>web.php</strong> as <code>Route::get('kpi/fetch/sla', 'fetchSLA')-&gt;name('kpi.fetchSLA'); // The API for fetching SLA as json</code></p>
  <p>Then went ahead and created the ajax request <code>GET</code></p>
  <pre><code>function fetchSLA() {
          $.ajax({
              type: 'GET',
              url: &quot;/management/kpi/fetch/sla&quot;,
              dataType: 'json',
              success: function (response) {
                  // console.log(response.SLATermData);
                  $(&quot;select[name='SLATerm']&quot;).change(function() {
                      $(&quot;input[name='SLACost']&quot;).val(response.SLATermData);
                  });
              }
          });
      }
  </code></pre>
  <p>Obviously, <code>SLATermData</code> will fetch the entire data as json and print it in the SLACost input, it shows as <code>[onject object object]</code></p>
  <p>I tried to do this:</p>
  <pre><code>$(&quot;select[name='SLATerm']&quot;).change(function() {
      $(&quot;input[name='SLACost']&quot;).val(response.SLATermData.SLACost);
  });
  </code></pre>
  <p>I thought that adding <code>SLACost</code> after <code>response.SLATermData</code> will do the trick.</p>
  <p>What's missing here?</p>