[英]Upon selecting a radio button, how do I use its value to dynamically update another PHP variable
我目前正在建立一個在線商店，並且正在將交付成本集成到結帳頁面，以便當用戶選擇兩個單選按鈕之一時，總價格會更新以反映郵資成本選擇。
HTML 代碼：
<h1 id='h1_centre'> Your Cart </h1> <div id="shopping-cart"> <table> <tbody> <tr> <th style='text-align:left; font-size: 1.5em;'><strong>Product</strong></th> <th style='text-align:left; font-size: 1.5em;'><strong></strong></th> <th style='text-align:left; font-size: 1.5em;'> <strong>Description</strong></th> <th style='text-align:left; font-size: 1.5em;'><strong>Quantity</strong></th> <th style='text-align:left; font-size: 1.5em;'><strong>Price</strong></th> <th style='text-align:left; font-size: 1.5em;'><strong>VAT</strong></th> <th style='text-align:right; font-size: 1.5em;'><strong>Total</strong></th> <th style='text-align:right; font-size: 1.5em;'></th> </tr> <tr> <td> <div id="product_image_checkout_large"> <img src="../images/pillows.png" </div> </td> <td>Pillows</td><td>Enter Text Here - Extra Information</td><td>1</td> <td>£20.00</td><td>£4.00</td><td style='text-align: right;'>£24.00</td> <td style='text-align:right;'> <form action='remove_cart_item.php' method='post'> <input type='text' name='cart_item' value='10' style='display: none;'> <button type='submit' value='Remove' style='background: none; border: none;'> <img src='../images/removal_cross.png' style='width: 25px; height: 25px'> </button> </form> </td> </tr> <tr> <td colspan='8' align=right style='font-size: 1.2em;'> Total: £24.00 </td> </tr> <tr> <td colspan='7' align=right style='font-size: 1em;'> <input type='radio' name='delivery' value='9.99' checked>1st Class - £9.99 </td> <td colspan='7' align=right style='font-size: 1em;'> <input type='radio' name='delivery' value='2.99' checked>2nd Class - £2.99 </td> </tr> <tr> <td colspan="8" align=right style="font-size: 1.5em;" > £26.99 </td> </tr> <tr> <td colspan="8" align=left > <!-- Button --> </td> </tr> </tbody> </table> </div>
PHP 根據來自 SQL 的購物車條目數據生成總成本的代碼：
$sql3="SELECT SUM(total_with_vat) FROM shopping_cart WHERE username='$myusername'";
// Posting Result
$result3 = mysqli_query($connection, $sql3);
// Counting Results
$count=mysqli_num_rows($result3);
if($count==0) {
} else {
if ($result3 = mysqli_query($connection, $sql3)){
while($row = $result3->fetch_array()) {
$total_new_vat = $row['0'];
echo "<tr ><td colspan='8' align=right style='font-size: 1.2em;'> Total: "."£".$total_new_vat."</td></tr>";
}
}
PHP 代碼生成 2 個郵資選項的單選按鈕：
$root = $_SERVER['DOCUMENT_ROOT'];
include "$root/ecommerce/connection.php";
echo "<tr >";
$sql4="SELECT * FROM delivery_charges where active= 'yes'";
// Posting Result
$result4 = mysqli_query($connection, $sql4);
// Counting Results
$count=mysqli_num_rows($result4);
if($count==0) {
} else {
if ($result4 = mysqli_query($connection, $sql4)){
while($row = $result4->fetch_array()) {
$class = $row['type'];
$delivery_amount = $row['amount'];
echo "<td colspan='7' align=right style='font-size: 1em;'><input type='radio' name='delivery' value='$delivery_amount' checked>$class - "."£".$delivery_amount."</td>";
}
}
當用戶選擇一個單選按鈕時，我希望 TOTAL PRICE 更新以包含它，而無需重新加載頁面。
我知道我需要一些 JS 代碼來操作頁面代碼，但我喜歡一些關於如何做到這一點的幫助。
謝謝。 斯坦。
這可以使用Jquery框架Javascript來完成。 為此，您必須在視圖頁面中包含Jquery框架文件，該文件用Javascript編寫。 在視圖頁面的底部添加以下代碼。
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
現在，當單擊任何單選按鈕時，您必須創建一個單擊事件 function。 為此，在兩個無線電輸入標簽中添加以下代碼。
onclick="add_delivery_cost(this.value)"
這將通過在單擊單選按鈕時傳遞單選輸入的值來調用add_delivery_cost() 。
在定義add_delivery_cost()之前，將id屬性添加到顯示總價的<td>中，如下所示。 使用這個 id 選擇器，我們將更改價格數據。
<td colspan='8' align=right style='font-size: 1.2em;' id="total-price-td"> Total: £24.00</td>
在上面的代碼下面添加一個隱藏的輸入，如下所示，
<input type="hidden" id="total-price" value="24.00">
通過這個我們將在add_delivery_cost()中獲得當前的總價格，並可以做進一步的處理。
現在是時候定義add_delivery_cost()了。 為此，在我們上面添加的<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>下方添加以下腳本。
<script>
var price_string=$('#total-price').val();
function add_delivery_cost(val){
var delivery_cost=parseFloat(val);//Converting to float value//Returns 24.00
var price=parseFloat(price_string);//Converting to float value
var total_price=(price+delivery_cost).toFixed(2);//Adding delivery cost to price and rounding to 2 decimal points
var price_html=' Total: £'+total_price;
$('#total-price-td').html(price_html);//Updating the `html` content of total-price with a new value after adding delivery cost to the price.
}
</script>
現在，單擊單選按鈕時，價格將發生變化。
完整還原的 HTML 代碼如下所示。
<h1 id='h1_centre'> Your Cart </h1> <div id="shopping-cart"> <table> <tbody> <tr> <th style='text-align:left; font-size: 1.5em;'><strong>Product</strong></th> <th style='text-align:left; font-size: 1.5em;'><strong></strong></th> <th style='text-align:left; font-size: 1.5em;'> <strong>Description</strong></th> <th style='text-align:left; font-size: 1.5em;'><strong>Quantity</strong></th> <th style='text-align:left; font-size: 1.5em;'><strong>Price</strong></th> <th style='text-align:left; font-size: 1.5em;'><strong>VAT</strong></th> <th style='text-align:right; font-size: 1.5em;'><strong>Total</strong></th> <th style='text-align:right; font-size: 1.5em;'></th> </tr> <tr> <td> <div id="product_image_checkout_large"> <img src="../images/pillows.png" </div> </td> <td>Pillows</td><td>Enter Text Here - Extra Information</td><td>1</td> <td>£20.00</td><td>£4.00</td><td style='text-align: right;'>£24.00</td> <td style='text-align:right;'> <form action='remove_cart_item.php' method='post'> <input type='text' name='cart_item' value='10' style='display: none;'> <button type='submit' value='Remove' style='background: none; border: none;'> <img src='../images/removal_cross.png' style='width: 25px; height: 25px'> </button> </form> </td> </tr> <tr> <td colspan='8' align=right style='font-size: 1.2em;' id="total-price-td"> Total: £24.00 <input type="hidden" id="total-price" value="24.00"> </td> </tr> <tr> <td colspan='7' align=right style='font-size: 1em;'> <input type='radio' name='delivery' value='9.99' onclick="add_delivery_cost(this.value)" checked>1st Class - £9.99 </td> <td colspan='7' align=right style='font-size: 1em;'> <input type='radio' name='delivery' value='2.99' onclick="add_delivery_cost(this.value)" checked>2nd Class - £2.99 </td> </tr> <tr> <td colspan="8" align=right style="font-size: 1.5em;" > £26.99 </td> </tr> <tr> <td colspan="8" align=left > <:-- Button --> </td> </tr> </tbody> </table> </div> <script src="https.//code.jquery.com/jquery-3.4.1.slim.min.js"></script> <script> var price_string=$('#total-price');val(); function add_delivery_cost(val){ var delivery_cost=parseFloat(val).//Converting to float value//Returns 24;00 var price=parseFloat(price_string).//Converting to float value var total_price=(price+delivery_cost);toFixed(2)://Adding delivery cost to price and rounding to 2 decimal points var price_html=' Total; £'+total_price. $('#total-price-td');html(price_html).//Updating the `html` content of total-price with a new value after adding delivery cost to the price. } </script>
如何使用單選按鈕的值動態填充表單中的另一個值？
[英]How do I use the value of a radio button to populate another value in my form dynamically?
如何獲取所選單選按鈕的值並將其傳遞給另一個變量？
[英]How do I take the value of a selected radio button and pass it to another variable?
如何使用 Javascript 和 Z3EB7106C3477A60E6BBF5DBFDE1DA 將 HTML 單選按鈕值傳遞給 PHP 變量？
[英]How do I pass HTML radio button value to a PHP variable using Javascript and Ajax?
如何使用 jquery 懸停/隱藏單選按鈕，同時將鼠標 hover 放在另一個單選按鈕或其 label、php/mysql 上
[英]how to do hover/hide radio buttons using jquery while mouse hover on another radio button or its label, php/mysql
Javascript 如何動態地為變量賦予按鈕的值？
[英]Javascript how do I give a variable the value of my button dynamically?
如何在用戶單擊單選按鈕之前更新 useState 變量？
[英]How do I update the useState variable BEFORE the user clicks a radio button?
如何按值查找單選按鈕以使用另一個元素檢查它 - VueJS
[英]How do I find a radio button by value to check it with another element - VueJS
如何使用 AJAX 請求在回調時選擇單選按鈕值和文本輸入？
[英]How to use AJAX request to select radio button value and text inputs upon callback?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.