Radio Buttons inside foreach loop

[danieldake]

Hello Guys.

I am fetching some results from database and show into a page. This is a CodeIgniter Project. Here si the code for that:

This is the view:

<div class="product_view">
<form action="" method="POST" name="form" id="form">
<?php foreach ($get_product->result() as $key => $result) : ?>
    <h4>Product Name: <?php echo $result->product_name; ?></h4>
    <h4>Product Price: <?php echo $result->product_price; ?></h4>
    <h4>Product Shipping: <?php echo $result->product_shipping; ?></h4>
    <input type="radio" name="radio" id="select_product" value="<?php echo $result->sku; ?>"><br>
    <hr>
<?php endforeach; ?>
<input type="submit" value="Process Order" name="submit" id="submit">
</form>
</div>

The scenario is like this, when customer chose one of the products by clicking one of the radio buttons in div i am showing the specific price and shipping amount for that product. I am using Jquery for this. So far is working, i am able to fetch the data without refreshing but there is an issue with radio button name because it creates an array and is fetching only the first radio button value, not the other dynamic radio button values. I have looked around but no success. The trick is inside this foreach loop with the radio button name. I don't know if any of you guys has been through this issue, but really could help me alot if you have the answer.

Thank you in advance

[diafol]

You can't do that as the id is the same too. So if you're using

$('#select_product') as a hook, then jQuery can only choose one of them.

<input type="radio" name="myradio" value="<?php echo $result->sku; ?>

could work with this...

$("input:radio[name=myradio]").click(function() {
   var sku = $(this).val();
   alert(sku);
});

Instead of alerting, you'd use the sku value to show a datapage etc.