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

Question

我试图在 Laravel 应用程序中的 HTML 表单中获取输入值的总和。 这是我已经拥有的代码。有什么建议吗？

我想要实现的两件事：

• 对于“总成本”，我希望它将两个输入的两美元金额相加，并在输入字段中显示总和。

• 对于“总数量”，我希望它将两个输入的两个数量相加，并在输入字段中显示总和。

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

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

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