How to get the value of radio buttons so that the value can be manipulated

Question

Edit: I got this to finally work! Below is my example. I hope this helps someone else in the same need.

I have a need for a shipping radio button. One for regular shipping and one for express shipping.

After some help from googling and cale_b here on this form, my problem is as follows:

I have a foreach loop that is getting values from a database and displaying them on a page. I need a radio button selector (or anything that works the same way) to pick which type of shipping the user wants. I need the buy button on each row to have a total that is calculated from another php page.

I can pull all this information from my shipping database and do the calculations and send it back to the page using ajax but I need to be able to dynamically get the price, size, type and shippingType sent and brought back based on each row. Then use that new total cost and assign it to an input field called totalCost for submition.

Here is the html/php code I am using now.

 <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>

Here is the getShipping.php file that returns my total cost.

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;

The following script does what I need it to do but with 2 problems 1. When I pick a radio button the value changes for all of them instead of the each one. cale_b I tried your solution here for finding the next TR but it does not return results. In turn does not set the input for submission either 2. The other issue is i need it to send the size, type and price dynamically to my getShipping.php page. I am not sure how to do that either.

<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>

So with all the code above, it appears I am close to what I am looking for but need some extra guidance.

Any help to this would be greatly appreciated.

Thanks,

jAC

Answer 1

If I understand your question properly, you don't need AJAX.

First, modify your HTML like so:

    <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>

Then, at the top of your output / in your <head>, add the following code:

// 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);
        }
    );
});

This relies on each "Shipping" being in a table row, and on the shipping display to be in a table cell within that row.

NOTE
The code above has been edited to ALSO support an input that will be passed when the form is submitted. Since that input was not in the original question code, I've made assumptions - look for "shipping_amount".

ADDITIONAL NOTE The above code has been modified to also provide an update to the "totalCost" input in the form.
Please note that a class has been added to the "price" cell (td element).

IF you submit this form this way, you're going to want to also:

1. Submit which product id is being ordered. This way on form validation (PHP side), you can load the product from the DB and verify the price.
2. Submit which shipping is being selected. This way you can verify the price of shipping.

In order to do this, your form tags should PROBABLY wrap the whole table, and you should add a hidden input that contains the "product id", so that you can get that info, as well as the selected radio button.

Good luck!

Answer 2

cale_b is right. It doesn't look like you need AJAX here. AJAX is used when you need to communicate with the server, and is usually used for database functions (looking stuff up on the fly, storing a new value, etc).

The point of AJAX is that it communicates with the server, sending data to the server and (optionally) receiving data back from the server, without refreshing the page. An HTML form also sends data to the server, but once the user clicks Submit the current page changes to the "action" page.

In your example, it appears that you need to use a javascript variable, not necessarily a PHP variable. If all you want to do is grab information off the page, store it in a variable, (perhaps perform some math using other values from other fields), and then spit the product back onto the same page -- no server interaction is needed. Javascript/jQuery will do that just fine.

For a better understand of what AJAX is all about, this post has some great beginner examples:

AJAX request callback using jQuery

And here is a good (free) introduction video to AJAX