首頁猿問如何在 Laravel 的幫助下將...

如何在 Laravel 的幫助下將 HTML 表單輸入中的值相加

JavaScript

翻閱古今 2022-05-22 10:36:16

我試圖在 Laravel 應(yīng)用程序中的 HTML 表單中獲取輸入值的總和。這是我已經(jīng)擁有的代碼。關(guān)于這怎么可能的任何建議？我想要實(shí)現(xiàn)的兩件事：對(duì)于“總成本”，我希望它將兩個(gè)輸入的兩美元金額相加，并在輸入字段中顯示總和。對(duì)于“總數(shù)量”，我希望它將兩個(gè)輸入的兩個(gè)數(shù)量相加并在輸入字段中顯示總和。 <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>不幸的是，我很難找到關(guān)于如何實(shí)現(xiàn)這一目標(biāo)的體面的文檔/說明。

查看完整描述

1 回答

海綿寶寶撒

TA貢獻(xiàn)1809條經(jīng)驗(yàn) 獲得超8個(gè)贊

將此添加到代碼的底部：

$("#price2").keyup(function(){

$("#total").val(parseFloat($("#price2").val()) + parseFloat($('#price1').val()));

})

$("#q2").change(function(){

$("#total_quan").val(parseInt($("#q1").val()) + parseInt($('#q2').val()));

})

</script>

并將數(shù)量總計(jì)的“id”更改為“total_quan”。需要注意的是，您不應(yīng)該有兩個(gè)具有相同 ID 的元素。

現(xiàn)在，我提供的這個(gè)代碼，只有在輸入第一個(gè)數(shù)量/價(jià)格后跟第二個(gè)輸入時(shí)才有效。它不會(huì)計(jì)算它是否輸入為產(chǎn)品二然后是產(chǎn)品一。但這應(yīng)該足以讓您進(jìn)行測試和開始。

這一切都是用 jquery/javascript 完成的。從這里，只需將總計(jì)的值發(fā)送到 laravel 后端，就可以對(duì)數(shù)據(jù)做任何你需要做的事情。所以 javascript 從表單中進(jìn)行計(jì)算，php 使用 JS 提供的計(jì)算輸出來做服務(wù)器端的東西。

反對(duì) 回復(fù) 2022-05-22