如何在 Laravel 的帮助下将 HTML 表单输入中的值相加

Question

我试图在 Laravel 应用程序中以 HTML 形式获取输入值的总和。这是我已经拥有的代码。关于如何做到这一点有什么建议吗？

我想实现的两件事：

对于"Total Cost"我想让它把两个输入的两美元金额相加并在输入字段中显示总和。
对于"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>

不幸的是，我无法找到关于如何实现这一点的体面 documentation/instructions。

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"。请注意，您不应该有两个具有相同 ID 的元素。

现在，我提供的这段代码只有在输入第一个 quantity/price 后跟第二个输入时才有效。它不会计算它是否作为产品二然后作为产品一输入。但这应该足以让你测试并开始。

这一切都是用 jquery/javascript 完成的。从这里，只需将总计值发送到 laravel 后端即可对数据执行任何需要执行的操作。所以 javascript 从表单进行计算，php 使用 JS 提供的计算输出来做服务器端的事情。

如何在 Laravel 的帮助下将 HTML 表单输入中的值相加

How to add up values in HTML form inputs with the help Laravel

html

javascript

forms

add

laravel