javascript - 选择单选按钮后，如何使用其值动态更新另一个 PHP 变量

Question

我目前正在建立一个在线商店，并且正在将送货费用整合到结帐页面上，以便当用户选择两个单选按钮之一时，总价格会更新以反射(reflect)邮费选择。

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>

根据 SQL 中的购物车条目数据生成总成本的 PHP 代码:

$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>";

   }

}

为 2 个邮资选项生成单选按钮的 PHP 代码:

$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>";
          }

  }

当用户选择单选按钮时，我希望更新总价格以包含此按钮，而无需重新加载页面。

我知道我需要一些 JS 代码来操作页面代码，但我喜欢一些关于如何执行此操作的帮助。

谢谢。 斯坦.

Answer 1

这可以使用 Jquery 来完成，一个Javascript框架。为此，您必须包含 Jquery View 页面中的框架文件，其内容为 Javascript 。在 View 页面的底部添加以下代码。

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>

现在，您必须在单击任何单选按钮时创建一个单击事件函数。为此，请在两个 radio 输入标记中添加以下代码。

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>