jquery function input radio onchange

Question

Im trying to implement a self-written query function. A brief description about the function: It should recalculate two values when changing the radio button. It is working in JSFiddle. (http://jsfiddle.net/VL465/34/)

However now i'm trying to implement it in a real webpage. But actually i'm not able to get it working. I've tried to debug it but didn't grinder to a hold.

Currently the console is only showing the "Function loaded" message. When changing the radio buttons it doesn't display days recognized.

Let me clarify the current HTML file:

in the head i have:

<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type="text/javascript" src="/js/functions.js"></script>

The form is exactly the same:

<form action="/b/" method="POST" id="choseLessor">
    <fieldset>
    <input type="hidden" name="userLocale" value="en">
    <ul>
        <li><span class="rate"> € 21,29</span> <span class="note">starting at </span><span class="radio"></span><input type="radio" class="styled" name="days" value="30" data-price="21.29"><b>30 days </b></li>
        <li><span class="rate"> € 23,65</span> <span class="note">starting at </span><span class="radio" style="background-position: 0px -50px;"></span><input type="radio" class="styled" name="days" value="60" data-price="23.65" checked=""><b>60 days </b></li>
        <li><span class="rate"> € 26,02</span> <span class="note">starting at </span><span class="radio"></span><input type="radio" class="styled" name="days" value="90" data-price="26.02"><b>90 days </b></li>
        <li><span class="rate"> € 27,20</span> <span class="note">starting at </span><span class="radio"></span><input type="radio" class="styled" name="days" value="120" data-price="27.2"><b>120 days </b></li>
    </ul>
    <div class="priceCalculation">
        <div class="list">
            <span class="type">List Price:</span>
            <span class="retailPriceActual">
                <div class="strikethrough">€ 49,93</div>
            </span>
        </div>
        <div class="savings">
            <span class="type">Your Savings:</span>
            <span class="bookSavings" id="CalculateSavings">€ 26,28</span>
        </div>

        <div class="total">
            <span class="type bigger">Your Price:</span>
            <span class="totalPrice" id="CalculatePrice">€ 23,65</span>
        </div>

    </div>
    <input type="submit" value="Cho" class="btn">
    </fieldset>
</form>

And the contents of functions.js

$( document ).ready(function() {
    console.log ( 'Function loaded' );
    $("input[name=days]:radio").change(function () {  
        console.log ( 'Days recognized' );
        // get values
        var savingPrice = 0;
        var msrp = $('input[name="msrp"]').val();
        var periodPrice = $('input[name="days"]:checked').data('price');
        var userLocale = $('input[name="userLocale"]').val();

        console.log ( 'UserLocale' + userLocale);

        // calculate bac
            savingPrice = (msrp-periodPrice).toFixed(2); 

        if(userLocale === 'nl')
        {   
            savingPrice = savingPrice.replace(/\./g, ',');
            periodPrice = periodPrice.replace(/\./g, ',');
        }

        $('#CalculateSavings').text('€ ' + savingPrice);
        $('#CalculatePrice').text('€ ' + periodPrice);
    });
});

The console is showing:

Function loaded 

And not more than this, even not when the radio button is changed.

What am i doing wrong?

Answer 1

I believe the problem is not with your code per se, but how it interacts with the code contained with custom-form-elements.js

It seems that your radio buttons are hidden behind styled span elements, to improve the look and feel of the form. However, from a DOM perspective, the actual element that the user clicks on is not the radio button, but the span element.

The custom-form-elements script does some funky stuff behind the scenes to make it look like the radio button has been selected, but a change event is never fired on the radio button.

In order to get around this, you'll need to add something like the following to your $(document).ready():

$("span.radio").click(function () { 
    $(this.nextSibling).trigger('change'); 
});

This will add a click event handler to the span masks that will fire the change event on their corresponding radio buttons. Looking at your HTML, this.nextSibling always refers to the radio button next to the span.