Question

编辑：我让这个终于工作了！以下是我的例子。我希望这能帮助其他同样需要的人。

我需要一个发货单选按钮。一个用于常规运输，一个用于快递。

在此表单上的googling和cale_b的帮助之后，我的问题如下：

我有一个foreach循环，它从数据库中获取值并在页面上显示它们。我需要一个单选按钮选择器（或任何以相同方式工作的东西）来选择用户想要的运输类型。我需要每行上的购买按钮，以便从另一个php页面计算总数。

我可以从我的货运数据库中提取所有这些信息并进行计算并使用ajax将其发送回页面，但我需要能够动态获取发送的价格，大小，类型和shippingType，并根据每个行。然后使用新的总成本并将其分配给名为totalCost for submition的输入字段。

这是我现在使用的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;

以下脚本执行我需要它做的事情，但有2个问题 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

Answer 1

如果我理解你的问题，你就不需要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);
        }
    );
});

这取决于表格行中的每个“送货”，以及出货显示中的行。。

注意
上面的代码已被编辑为ALSO支持将在提交表单时传递的输入。由于该输入不在原始问题代码中，我已做出假设 - 寻找“shipping_amount”。

附加说明 上述代码已经过修改，还可以对表格中的“totalCost”输入进行更新 请注意已将某个类添加到“price”单元格（td元素）。

如果您以这种方式提交此表单，您还需要：

提交订购的产品ID。这种方式在表单验证（PHP方面）上，您可以从数据库加载产品并验证价格。

提交正在选择的运送。这样您就可以验证运费。

为了做到这一点，你的表单标签应该PROBABLY包装整个表，你应该添加一个包含“产品ID”的隐藏输入，这样你就可以获得该信息，以及所选的单选按钮。
祝你好运！

Answer 2

cale_b是对的。这看起来不像你需要AJAX。当您需要与服务器通信时使用AJAX，并且通常用于数据库功能（动态查找内容，存储新值等）。

AJAX的重点在于它与服务器通信，将数据发送到服务器并（可选）从服务器接收数据，而不刷新页面。 HTML表单还会将数据发送到服务器，但是一旦用户单击Submit，当前页面就会更改为“操作”页面。

在您的示例中，您似乎需要使用javascript变量，而不一定是PHP变量。如果您只想从页面中获取信息，将其存储在变量中（可能使用其他字段中的其他值执行一些数学运算），然后将产品吐回到同一页面 - 无需服务器交互。 Javascript / jQuery就可以了。

为了更好地理解AJAX的全部内容，本文有一些很好的初学者例子：

AJAX request callback using jQuery

这是一个很好的(free) introduction video to AJAX

如何获取单选按钮的值以便可以操作值

2 个答案: