jAC jAC - 4 years ago 81
PHP Question

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

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 Source

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>$<?= $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 price = $(this).attr('value');
            // Find the proper cell, and set the display to the amount
            $(this).closest('tr').find('td.shipping').html(price);
            $(this).closest('tr').find('input.shipping_amount').val(price);
        }
    );
});

Of course if you change your markup, you may need to alter the script to match. 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".

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download