Question

Got a strange thing going on, really don’t have a idea how to solve this one. Neither did I find useful stuff when googleing.

I have a html form that includes this:

<label for="gebied">Gebieden</label>
<div class="button button-selected"><input type="checkbox" name="areas" value="nederland" checked="checked" />Nederland</div>
<div class="button button-selected"><input type="checkbox" name="areas" value="europa" checked="checked" />Europa</div>
<div class="button button-selected"><input type="checkbox" name="areas" value="wereld" checked="checked" />De Wereld</div>

Then with javascript (jQuery) I check which are checked and which are not:

var areas = [];
$('input[name=areas]:checked').each(function(){
areas.push($(this).val());
 });

This is called from within createShortUrl();, below in the relevant code:

$(function() {
    //Handle things when a buttons is clicked
    $("div.button").click(function() {
        //Find the input field for the clicked div
        var input = $(this).find(':input');
        var inputName = $(input).attr('name');
        //Handle checkboxes, which define the gebied
        if ($(input).is(':checkbox')) {
            //Change the classes
            input.prop('checked', !input[0].checked);
            $(this).toggleClass('button-selected');
        }
        //Handle radio
        if ($(input).is(':radio')) {
            $('form').find('input[name=' + inputName + ']').each(function() {
                $(this).parent('div').toggleClass('button-selected');
                $(this).prop('checked', !input[0].checked);
            });
        }
        //Clicking means something chanhes; create a new short url
        createShortUrl();
    });
}); 

The strange thing is that when in Firefox, when I have earlier checked some of them, they stay in the areas array. Even when I uncheck some of them, they stay in the array and vice versa. But when debugging in Safari, it works like a charm!

When I then uncheck every thing, the array is empty. Recheck some, and there in the array.

So, any ideas, what’s going on with Firefox? It looks like FF is caching, even after couple of times refreshing, the previous array. Despite my

var areas = []

in which I hoped to empty it and rebuild it….

It’s live at here, fired after the large button on the bottom is clicked.

Any thoughts are more then welcome!

Answer 1

The issue is with your event handler. The problem is, the way you are modifying the state of the element does not work in Firefox. You should use attr() instead of prop() to change the checked state.

Working code: Replaced .prop() with .attr().

//Handle things when a buttons is clicked
$("div.button").click(function() {
    console.log("Click");

    //Find the input field for the clicked div
    var input = $(this).find(':input');
    var inputName = $(input).attr('name');

    //Handle checkboxes, which define the gebied
    if ($(input).is(':checkbox')) {
        //Change the classes
        console.log("check");
        input.attr('checked', !input[0].checked);
        $(this).toggleClass('button-selected');
    }

    //Handle radio
    if ($(input).is(':radio')) {
        $('form').find('input[name=' + inputName + ']').each(function() {
            $(this).parent('div').toggleClass('button-selected');
            $(this).attr('checked', !input[0].checked);
        });
    }
    //Clicking means something chanhes; create a new short url
    createShortUrl();
});