如何在 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>

不幸的是，我很难找到关于如何实现这一目标的像样的文档/说明。

Answer 1

将其添加到代码底部：<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script>&nbsp; $("#price2").keyup(function(){&nbsp; &nbsp; $("#total").val(parseFloat($("#price2").val()) + parseFloat($('#price1').val()));&nbsp; })&nbsp; $("#q2").change(function(){&nbsp; &nbsp; $("#total_quan").val(parseInt($("#q1").val()) + parseInt($('#q2').val()));&nbsp; })</script>并将数量总计的“id”更改为“total_quan”。需要注意的是，不应有两个具有相同 ID 的元素。现在，我提供了这个代码，只有在输入第一个数量/价格，然后输入第二个输入时，这才有效。如果它先作为产品二输入，然后作为产品一输入，则不会计算。但这应该足以让您进行测试并开始使用。这一切都是用 jquery/javascript 完成的。从这里开始，只需将总计值发送到 laravel 后端即可对数据执行您需要执行的任何操作。因此，javascript 从表单进行计算，php 使用 JS 提供的计算输出进行服务器端工作。