Dynamically get radio button results

Question

I'm using joomla and have a template override on my articles to display a deal. The deals are stored in sql database so I retrieve the stored information using php. See below:

$query->clear();
$query->select('*');
$query->from($db->quoteName('#__deal_option'));
$query->where($db->quoteName('deal_id')." = ".$cmgbstore_id ." AND (". $db->quoteName('option_id')." = 1 OR 2 OR 3)");

$db->setQuery($query);
$db->execute();
$num_rows = $db->getNumRows();

The deals have more than one option so i retrieve the deals using the following:

$row = $db->loadRowList();
$opt1_id = $row['0']['2'];
$opt1_o_price = $row['0']['4'];
$opt1_d_price = $row['0']['5'];
$opt1_title = $row['0']['3'];
$opt1_save = $opt1_o_price-$opt1_d_price;

The same code is used to retrieve the other options by changing the row and gets stored to the same variables but the number change eg. option two's id would be stored in $opt2_id.

My issue is I need users to be able to select the option they want and dynamically update on the website without using a submit button. Basically when the option is selected the price updates automatically.

To fix this I used a radio box selection. See code below:

<div class="product-options-contain">
    <?php
    if ($num_rows >= '1') {
    ?>
    <div class="product-options">
        <div class="option-input">
            <input type="radio" value= "1" name="product-option" class="radio" checked="checked">
        </div>
        <label class="option-detail">
            <span class="option-title"><?php echo $opt1_title ?></span>
            <span class="option-price">R<?php echo $opt1_o_price ?></span>
            <span class="option-was-price">R<?php echo $opt1_d_price ?></span>
            <span class="option-discount">Save R<?php echo $opt1_save .'.00'?></span>
            <span class="option-bought">Over 31 bought</span>
        </label>
    </div>
    <?php   
    }
    ?>
    <?php   
    if ($num_rows >= '2') {
    ?>
    <div class="product-options">
        <div class="option-input">
            <input type="radio" value= "2" name="product-option" class="radio">
        </div>
        <label class="option-detail">
            <span class="option-title"><?php echo $opt2_title ?></span>
            <span class="option-price">R<?php echo $opt2_o_price ?></span>
            <span class="option-was-price">R<?php echo $opt2_d_price ?></span>
            <span class="option-discount">Save R<?php echo $opt2_save .'.00'?></span>
            <span class="option-bought">Over 31 bought</span>
        </label>
    </div>
    <?php   
    }
    ?>                                  
    <?php   
    if ($num_rows >= '3') { ?>
    <div class="product-options">
        <div class="option-input">
            <input type="radio" value= "3" name="product-option" class="radio">
        </div>
        <label class="option-detail">
            <span class="option-title"><?php echo $opt3_title ?></span>
            <span class="option-price">R<?php echo $opt3_o_price ?></span>
            <span class="option-was-price">R<?php echo $opt3_d_price ?></span>
            <span class="option-discount">Save R<?php echo $opt3_save .'.00'?></span>
            <span class="option-bought">Over 31 bought</span>
        </label>
    </div>
    <?php   
    }
    ?>
</div>

As you can see the option is only visible if the option exists. Now where I'm stuck is retrieving the value that has been selected in the radio button.

I have a script that does allows me to view the value of the selected option via an alert:

<script type="text/javascript">
    function getval(sel)
    {
        alert(sel.value);
    }
</script>

But I dont need the alert, I need a value. And I need to be able to use the value to dynamically change the information displayed. I'm guessing I require AJAX to complete this but I have tried many different combinations but nothing seemed to work.

I have found a script that works on the same principle but I have no idea on how to implement it into my code.

$(function () {
    $('.product-options input:first').attr('checked', 'checked');
})

$(document).on('change', '.product-options input', function () {
    var productId = $(this).attr('data-productId');
    var price = $(this).attr('data-price')
    var discount = $(this).attr('data-discount')
    var save = $(this).attr('data-save')
    $('[data-id]').attr('data-id', productId);
    $('.savings .value.selling-price .value-amount').html(price);
    $('.savings .value.discount .value-amount').html(discount);
    $('.savings .value.save .value-amount').html(save);
})

To be honest I don't even know how it works.

I really need help and any assistance would be greatly appreciated.

When you say you need to get the radio button values, do you need to get them before or after submitting the form? If it's **before**, the PHP is wholly irrelevant -- you simply need to target the `:checked` pseudo-selector element, and grab its `.value` (no AJAX required). There's an example of that [**here**](https://stackoverflow.com/a/24886483/2341603) (replacing `genders` with `product-option`). If you need the value **after** submission, it's as simple as echoing the results from the database (which may require an AJAX call depending on *when* you want to show the database data). — Obsidian Age, Jan 14 '18 at 23:07
@ObsidianAge The value is required before since the user has to see the information eg. price before clicking on the buy link. The reason I mentioned the PHP is because other information such as the price is updated using php. What I mean by that is the value of the radio box eg "3" would be used to refer the displayed price using $discount_price. If the value was "2" then the $discount_price has to change with it. — Martin Pretorius, Jan 14 '18 at 23:23
@ObsidianAge An example of what I'm looking to do can be found here [link](https://www.hyperli.com/products/choice_of_full_body_massage_and_choice_of_meal_for_one_or_two_at_sugar_hotel) There are two options you can choose from and selecting one updates the price without submitting anything or reloading the page. — Martin Pretorius, Jan 14 '18 at 23:29

Rasclatt · Accepted Answer · 2018-01-15T05:16:20.983

Since it looks like you are calculating everything in the back end, you just put the attributes in the data fields in each radio. Below is an example with static values.

Here is a demo: https://jsfiddle.net/nbucona8/2/

Hopefully this is what you are looking for:

<div class="product-options">
  <div class="option-input">
    <input type="radio" value= "1" name="product-option" class="radio item" data-sku="1001" data-price="100" data-discount="20" data-save="20" data-after="80" />
  </div>
  <label class="option-detail">
    <span class="option-title">Item Title One</span>
    <span class="option-price">R100</span>
    <span class="option-was-price">R80</span>
    <span class="option-discount">Save R20</span>
    <span class="option-bought">Over 31 bought</span>
  </label>
</div>

<div class="product-options">
  <div class="option-input">
    <input type="radio" value= "2" name="product-option" class="radio item" data-sku="1002" data-price="200" data-discount="25" data-save="25" data-after="150"  />
  </div>
  <label class="option-detail">
    <span class="option-title">Item Title Two</span>
    <span class="option-price">R200</span>
    <span class="option-was-price">R150</span>
    <span class="option-discount">Save R50</span>
    <span class="option-bought">Over 31 bought</span>
  </label>
</div>

<input type="hidden" name="sku" value="" />
<div id="pricing"></div>
<div id="savings"></div>
<div id="discount"></div>

<script>
$(function(){
    $('.item').on('change',function(){
        $('#pricing').text('R'+($(this).data('price')));
        $('#savings').text('R'+($(this).data('after')));
        $('#discount').text(($(this).data('discount'))+'% OFF');
        $('input[name=sku]').val($(this).data('sku'));
    });
});
</script>

Thank you very much! Simple yet effective. – Martin Pretorius Jan 15 '18 at 05:11 — Martin Pretorius, Jan 15 '18 at 05:11

Dynamically get radio button results

1 Answers1