title: get value from form select and then calculate value in an input
body: <p>I am trying to calculate multiple values based on multiple selections from a  and then have the data add up and display in an  on the same form. I tried some jquery stuff but didn't really work at all. I've tried using some Javascript to do the calcultions but nothing seems to be happening.</p>
  <p>Blade:</p>
  <pre><code>@extends('layout.layouts')
  
  @section('content')
  
  &lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot; dir=&quot;ltr&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;title&gt;NCIC - Reports&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;br&gt;
      &lt;h1&gt;New Report&lt;/h1&gt;
      &lt;br&gt;
      &lt;form action=&quot;{{ 'storereport' }}&quot; method=&quot;POST&quot; enctype=&quot;multipart/form-data&quot;&gt;
        @csrf
    &lt;div class=&quot;form-group&quot;&gt;
      &lt;label for=&quot;title&quot;&gt;Title&lt;/label&gt;
      &lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;title&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-group&quot;&gt;
      &lt;label for=&quot;author&quot;&gt;Reporting Officer&lt;/label&gt;
      &lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;author&quot; value=&quot;{{ Auth::user()-&gt;name }}&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-group&quot;&gt;
      &lt;label for=&quot;profileid&quot;&gt;SSN&lt;/label&gt;
      &lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;profileid&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-group&quot;&gt;
      &lt;label for=&quot;report&quot;&gt;Report&lt;/label&gt;
      &lt;textarea class=&quot;form-control&quot; name=&quot;report&quot; rows=&quot;10&quot;&gt;&lt;/textarea&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-group&quot;&gt;
      &lt;label for=&quot;selectpicker&quot;&gt;Select Offences&lt;/label&gt;
      &lt;select class=&quot;selectpicker&quot; id=&quot;lawspicker&quot; name=&quot;laws[]&quot; data-width=&quot;100%&quot; data-live-search=&quot;true&quot; multiple&gt;
      @foreach($laws as $law)
      &lt;option value=&quot;{{ $law-&gt;name }} {{ $law-&gt;fine }} {{ $law-&gt;months }}&quot;&gt;Offence: {{ $law-&gt;name }} &lt;/option&gt;
      @endforeach
    &lt;/select&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-group&quot;&gt;
      &lt;label for=&quot;punishment&quot;&gt;Punishment&lt;/label&gt;
      &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;punishment&quot; name=&quot;punishment&quot;&gt;
    &lt;/div&gt;
    &lt;hr style=&quot;background-color:white;&quot;&gt;
    &lt;button type=&quot;submit&quot; class=&quot;btn btn-success&quot;&gt;Submit&lt;/button&gt;
    &lt;a class=&quot;btn btn-info float-right&quot; href=&quot;{{ route('reports') }}&quot;&gt;Main menu&lt;/a&gt;
  &lt;/form&gt;
    &lt;/body&gt;
    &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
  
      $(&quot;#lawspicker&quot;).keyup(function(){
        $(&quot;#punishment&quot;).val(parseFloat($(&quot;{{ $law-&gt;months }}&quot;).val()) + parseFloat($('{{ $law-&gt;fine }}').val()));
      })
  
      $(&quot;#lawspicker&quot;).change(function(){
        $(&quot;#punishment&quot;).val(parseInt($(&quot;#lawspicker&quot;).val());
      })
  
    &lt;/script&gt;
    &lt;style&gt;
      body{
        background-color: #353b48;
        color:white;
      }
    &lt;/style&gt;
  &lt;/html&gt;
  
  
  @endsection
  
  </code></pre>
  <p>To clarify, I want <code>{{ $law-&gt;months }}</code> &amp; <code>{{ $law-&gt;fine }}</code> to add up and then display in <code>#punishment</code> <code>&lt;input&gt;</code></p>
  <p>Thanks for looking!</p>