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

标签 php jquery html ajax

编辑:我终于成功了!下面是我的例子。我希望这可以帮助其他有同样需要的人。

我需要一个运输单选按钮。一种用于普通运输,一种用于 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 元素)中添加了一个类。

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

  1. 提交正在订购的产品 ID。通过这种方式,在表单验证(PHP 端)上,您可以从数据库加载产品并验证价格。
  2. 提交正在选择的运输方式。这样您就可以验证运费。

为了做到这一点,您的表单标签可能应该包裹整个表格,并且您应该添加一个包含“产品 ID”的隐藏输入,以便您可以获得该信息以及所选的单选按钮。

祝你好运!

关于php - 如何获取单选按钮的值以便可以操作该值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34578842/

相关文章:

php - 我们应该删除 Facebook 应用程序生成的请求吗?

php - AWS S3 : Image resize using lambda in laravel 5. 3

php 错误地回显标签外的内容

jquery - Firefox 不会触发 $(document).ready(function() {

javascript - jQuery DataTables 和 Columnfilterwidget 重置所有过滤器按钮

javascript - 只用一个动画类来回无缝过渡?

html - 导航栏中的事件状态不起作用

PHP 字符串函数与 mbstring 函数

jquery - 简化冗余的 jQuery 代码

Php表单不向MySql数据库提交数据