为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

翻阅古今 2022-05-22 10:36:16
我试图在 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>不幸的是,我很难找到关于如何实现这一目标的体面的文档/说明。
查看完整描述

1 回答

?
海绵宝宝撒

TA贡献1809条经验 获得超8个赞

将此添加到代码的底部:


<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 提供的计算输出来做服务器端的东西。


查看完整回答
反对 回复 2022-05-22
  • 1 回答
  • 0 关注
  • 150 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号