Как сложить значения в HTML форма ввода с помощью Laravel

Question

Я пытаюсь получить сумму входных значений в форме HTML в приложении Laravel. Вот код, который у меня уже есть. Любые предложения о том, как это возможно?

Две вещи, которые я хочу достичь:

• Для «Общая стоимость» я хочу, чтобы он сложил двухдолларовую сумму два входа и отображают сумму в поле ввода.

• Для "Total Qty" я хочу, чтобы он сложил две количественные величины двух входов и отобразил сумму в поле ввода .

<!--FORM-->
  <form action="/orders/create" method="POST">
    @csrf
    <div class="form-group">
      <label for="productsOrdered">Products Ordered</label>

      <input name="product1" class="form-control" id="product1" placeholder="Product 1">
      <input name="price1" class="form-control" id="price1">
      <select name="q1" class="form-control" id="q1">
          <option value="">Quantity</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
      </select><br>

      <input name="product2" class="form-control" id="product2" placeholder="Product 2">
      <input name="price2" class="form-control" id="price2">
      <select name="q2" class="form-control" id="q2">
          <option value="">Quantity</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
      </select><br>

    <div class="form-group">
      <label for="shippingcost">Shipping Cost:</label>
      <input name="shipping" class="form-control" id="shipping" placeholder="--.-- (no dollar sign)">
    </div>

    <div class="form-group">
      <label for="tax">Tax</label>
      <input name="tax" class="form-control" id="tax" placeholder="(leave blank if 0)">
    </div>


<!--For "Total Cost" I want it to add up the two dollar amounts of the two inputs and display the sum in the input field.-->

    <div class="form-group">
      <label for="total">Total Order Cost:</label>
      <input name="total" class="form-control" id="total">
    </div>



<!--For "Total Qty" I want it to add up the two quantity amounts of the two inputs and display the sum in the input field.-->

    <div class="form-group">
      <label for="total">Total Qty:</label>
      <input name="total" class="form-control" id="total">
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
  </form>

К сожалению, у меня проблемы с поиском достойной документации / инструкций о том, как этого добиться.

Answer 1

Добавьте это в конец кода:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<script>

  $("#price2").keyup(function(){
    $("#total").val(parseFloat($("#price2").val()) + parseFloat($('#price1').val()));
  })

  $("#q2").change(function(){
    $("#total_quan").val(parseInt($("#q1").val()) + parseInt($('#q2').val()));
  })

</script>

И измените «id» итогового количества на «total_quan». Хорошее примечание: у вас не должно быть двух элементов с одинаковым идентификатором.

Теперь этот код, который я предоставил, будет работать, только если введено первое количество / цена, а затем второй ввод , Он не рассчитывается, если он введен как продукт два, а затем продукт один. Но этого должно быть достаточно, чтобы протестировать и начать.

Все это было сделано с помощью jquery / javascript. Отсюда просто отправьте значение итогов на сервер laravel, чтобы сделать все, что вам нужно сделать с данными. Таким образом, javascript для выполнения вычислений из формы, php для выполнения операций на стороне сервера с выводом вычислений, полученным из JS.

.