rbur0425
4 weeks ago

Calculate Total in AlpineJS

Posted 4 weeks ago by rbur0425

I just want a simple calculator with AlpineJS to show a total based off of 3 inputs the user enters. total_amount, shipping_mount and tax_rate. However, I get the following error -

The specified value "[object HTMLInputElement]" cannot be parsed, or is out of range.

Below is my blade file -

 <div x-data="{total: 0}">
            <div>
                  <label for="total_amount" class="block text-sm font-medium leading-5 text-gray-700">
                    Total Amount
                  </label>
                  <div class="mt-1 flex rounded-md shadow-sm">
                    <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
                      $
                    </span>
                    <input x-model="total_amount" x-on:input="update_total" id="total_amount" name="transaction[total_amount]" class="form-input flex-1 block w-full px-3 py-2 rounded-none rounded-r-md sm:text-sm sm:leading-5" placeholder="207.99" type="number" step="0.01">
                  </div>
                </div>

               <div>
                  <label for="shipping_amount" class="block text-sm font-medium leading-5 text-gray-700">
                    Shipping Amount
                  </label>
                  <div class="mt-1 flex rounded-md shadow-sm">
                    <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
                      $
                    </span>
                    <input x-model="shipping_amount" x-on:input="update_total" id="shipping_amount" name="transaction[shipping_amount]" class="form-input flex-1 block w-full px-3 py-2 rounded-none rounded-r-md sm:text-sm sm:leading-5" placeholder="10.99" type="number" step="0.01">
                  </div>
                </div>

                <div>
                  <label for="tax_rate" class="block text-sm font-medium leading-5 text-gray-700">
                    Tax Rate
                  </label>
                  <div class="mt-1 flex rounded-md shadow-sm">
                    <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
                      %
                    </span>
                    <input x-model="tax_rate" x-on:input="update_total" id="tax_rate" name="transaction[tax_rate]" class="form-input flex-1 block w-full px-3 py-2 rounded-none rounded-r-md sm:text-sm sm:leading-5" placeholder="8.0" type="number" step="0.1">
                  </div>
                </div>

                <div>
                    <h6 class="block text-sm font-medium leading-5 text-gray-700">Total: <p class="inline" x-text="total"></p></h6>
                </div>
            </div>

@section('javascript')
<script type="text/javascript">

    function update_total() {
        return {
            total: (total_amount + shipping_amount) * ((tax_rate /100) + 1),
        }
    }
    </script>
@endsection

Please sign in or create an account to participate in this conversation.