编辑:我终于成功了!下面是我的例子。我希望这可以帮助其他有同样需要的人。
我需要一个运输单选按钮。一种用于普通运输,一种用于 express 运输。
在谷歌搜索和 cale_b 在此表单上提供一些帮助后,我的问题如下:
我有一个 foreach 循环,它从数据库获取值并将它们显示在页面上。我需要一个单选按钮选择器(或任何以相同方式工作的东西)来选择用户想要的运输类型。我需要每行上的购买按钮才能获得从另一个 php 页面计算得出的总计。
我可以从我的运输数据库中提取所有这些信息并进行计算,然后使用ajax将其发送回页面,但我需要能够动态获取发送和带回的价格、尺寸、类型和运输类型排。然后使用新的总成本并将其分配给名为totalCost 的输入字段以供提交。
这是我现在使用的 html/php 代码。
<div class="details">
<table class="default">
<th>Type</th>
<th>Size</th>
<th>Price</th>
<th>Shipping</th>
<th>Total</th>
<th>Buy</th>
<?php
$getArtDetails = get_tableContentsWhere($con,'prices','artID',$id);
foreach($getArtDetails as $detail)
{
?>
<tr>
<td class="type"><?= $detail['type'] ?></td>
<td class="size"><?= $detail['size'] ?></td>
<td class="price">$<?= $detail['price'] ?>.00</td>
<td>
<input type="radio" name="shipping_<?= $detail['id'] ?>" class="radio" value="Xpress">Express Shipping
<input type="radio" name="shipping_<?= $detail['id'] ?>" class="radio" value="Regular">Regular Shipping
<input type="radio" name="shipping_<?= $detail['id'] ?>" class="radio" value="Free">Free Shipping
</td>
<td class="shipping"></td>
<td>
<form action="" method="post">
<input type="hidden" name="totalCost" value="set by jquery?">
<input type="submit" name="submit" value="Buy">
</form>
</td>
</tr>
<?php } ?>
</table>
</div>
这是返回我的总费用的 getShipping.php 文件。
shipping.php:
<?php
include 'admin/config/functions.php';
$size = $_GET['size'];
$type = $_GET['type'];
$price = $_GET['price'];
$shippingType = $_GET['shippingType'];
$shipping = get_shippingRate($con,$size,$type,$shippingType);
$totalCost = $shipping + $price;
echo $totalCost;
以下脚本完成了我需要它做的事情,但有两个问题 1. 当我选择一个单选按钮时,所有单选按钮的值都会发生变化,而不是每个单选按钮的值都会发生变化。 cale_b 我在这里尝试了你的解决方案来查找下一个 TR,但它不返回结果。反过来也不设置提交的输入 2. 另一个问题是我需要它将尺寸、类型和价格动态发送到我的 getShipping.php 页面。我也不知道该怎么做。
<script>
$('input[name^="shipping"]').each(function(index) {
$(this).on('click', function(){
var shippingType = $(this).val();
var size = $(this).closest('tr').find('td.size').text();
var type = $(this).closest('tr').find('td.type').text();
var price = $(this).closest('tr').find('td.price').text();
// I had to set $(this) to equal $this so I could access it within the ajax call as $(this) was referring to itself.
var $this = $(this);
$.ajax({
type: "GET",
url: "getShipping.php",
data: 'size=' + size + '&type=' + type + '&shippingType=' + shippingType + '&price=' + price,
success:function(data){
//called when successful
$this.closest('tr').find('td.shipping').html(data);
},
error: function(e) {
//called when there is an error
console.log(e.message);
}
});
});
});
</script>
因此,通过上面的所有代码,看来我已经接近我正在寻找的内容,但需要一些额外的指导。
对此的任何帮助将不胜感激。
谢谢
jAC
最佳答案
如果我正确理解你的问题,你不需要 AJAX。
首先,像这样修改您的 HTML:
<tr>
<td><?= $detail['type'] ?></td>
<td><?= $detail['size'] ?></td>
<td class="product_price">$<?= $detail['price'] ?>.00</td>
<td>
<input type="radio" name="shipping_<?= $detail['id'] ?>" class="radio" value="30">Express Shipping
<input type="radio" name="shipping_<?= $detail['id'] ?>" class="radio" value="15">Regular Shipping
<input type="radio" name="shipping_<?= $detail['id'] ?>" class="radio" value="0">Free Shipping
<input type="hidden" class="shipping_amount" name="shipping_amount_<?php echo $detail['id']" value="">
</td>
<?php // Create a "container" for the price ?>
<td class="shipping"></td>
</tr>
然后,在输出的顶部/在 <head>
中,添加以下代码:
// Document Ready - wait until page is loaded
jQuery(function($) {
// Select all inputs with name starting with "shipping". Don't need script inside of the loop
$(document).on('click', 'input[name^="shipping"]',
function() {
// Get the price from the clicked input
var shipping = parseFloat($(this).attr('value'));
var price = parseFloat($(this).html());
var total = price + shipping;
// Find the proper cell, and set the display to the amount
$(this).closest('tr').find('td.shipping').html(shipping);
$(this).closest('tr').find('input.shipping_amount').val(shipping);
$(this).closest('tr').find('input[name^="totalCost"]').val(total);
}
);
});
这依赖于表行中的每个“运输”,以及该行内的表格单元格中的运输显示。
注意
上面的代码已被编辑,还支持提交表单时传递的输入。由于该输入不在原始问题代码中,因此我做出了假设 - 查找“shipping_amount”。
附加说明
上面的代码已被修改,还可以更新表单中的“totalCost”输入。
请注意,“价格”单元格(td 元素)中添加了一个类。
如果您以这种方式提交此表单,您还需要:
- 提交正在订购的产品 ID。通过这种方式,在表单验证(PHP 端)上,您可以从数据库加载产品并验证价格。
- 提交正在选择的运输方式。这样您就可以验证运费。
为了做到这一点,您的表单标签可能应该包裹整个表格,并且您应该添加一个包含“产品 ID”的隐藏输入,以便您可以获得该信息以及所选的单选按钮。
祝你好运!
关于php - 如何获取单选按钮的值以便可以操作该值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34578842/