首頁猿問如何在 Laravel...

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

Html5

江戶川亂折騰 2023-09-18 15:35:29

我正在嘗試在 Laravel 應(yīng)用程序中獲取 HTML 表單中的輸入值總和。這是我已經(jīng)擁有的代碼。關(guān)于如何做到這一點(diǎ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>不幸的是，我很難找到關(guān)于如何實(shí)現(xiàn)這一目標(biāo)的像樣的文檔/說明。

查看完整描述

1 回答

梵蒂岡之花

TA貢獻(xiàn)1900條經(jīng)驗(yàn) 獲得超5個(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í)，這才有效。如果它先作為產(chǎn)品二輸入，然后作為產(chǎn)品一輸入，則不會(huì)計(jì)算。但這應(yīng)該足以讓您進(jìn)行測試并開始使用。

這一切都是用 jquery/javascript 完成的。從這里開始，只需將總計(jì)值發(fā)送到 laravel 后端即可對(duì)數(shù)據(jù)執(zhí)行您需要執(zhí)行的任何操作。因此，javascript 從表單進(jìn)行計(jì)算，php 使用 JS 提供的計(jì)算輸出進(jìn)行服務(wù)器端工作。

反對(duì) 回復(fù) 2023-09-18