javascript - 如何在 Laravel 的帮助下将 HTML 表单输入中的值相加
问题描述
我试图在 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>
不幸的是,我很难找到关于如何实现这一目标的体面的文档/说明。
解决方案
将此添加到代码的底部:
<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 提供的计算输出来做服务器端的东西。
推荐阅读
- python - 在numpy中找到单一颜色的投影矩形的角
- r - 如何删除 R 中 FASTA 格式参数中的间隙或空闲空间?
- php - Laravel 检测刀片页面上是否有错误
- django - 如何将内存文件转换为文件对象
- pandas - Pandas 中的选择行
- android - carouselPicker 意图活动中的错误
- python - 序列生成器中的错误:StopIteration:列表索引超出范围
- vmware - VMWare Workstation 12.5.9 在主机 Linux 4.16.12 内核上引发段错误(错误 14)
- macos - 如何使用电子获得完美尺寸的托盘图标?
- match - 如何在 MongoDB 的 $match 阶段使用 $ifNull