input:radio click function isn't triggering in IE / Firefox

Question

I have a form with multiple inputs / radio buttons.

I also have a series of Yes & No radio buttons. When the "Yes" radio button is checked, I have some data slide down beneath.

HTML:

        <div class="item seperator first clearfix">
            <label>test</label>
            <div class="radioWrap">
                <label class="yes">
                <input class="homepageContent" name="homepageContent" type="radio" value="yes" />
                </label>
                <label class="no">
                <input class="homepageContent" name="homepageContent" type="radio" value="no" checked />
                </label>
            </div>
        </div>
        <div class="extrasInner">
            <div class="item clearfix">
                <label for="theContent">Your Content:</label>
                <textarea id="theContent" name="theContent"></textarea>
            </div>  
        </div>  
        <div class="extrasOuter hide clearfix">         
            <a href="#" class="makeChanges">Make Changes</a>
            <span>Click "Make Changes" to update.</span>
        </div>  

The jQuery:

$("input:radio[name=homepageContent], input:radio[name=addSocialIcons], input:radio[name=addTracking]").click(function() {
    var value = $(this).val();
    if (value == 'yes') {
        $(this).parent().parent().parent().next().slideDown();          
        $(this).parent().parent().parent().next().next().slideDown();
    } else {
        $(this).parent().parent().parent().next().slideUp();
        $(this).parent().parent().parent().next().next().slideUp();
    }
});

Question 1) This works absolutely fine in Google Chrome, but not in Firefox and IE. It doesn't seem to recognise the click function?

Solved: I had a function within one of my files that removes the value from input fields on focus and this was stripping the value of the radio buttons as well in IE / Firefox (but not chrome!).

Question 2) Is my DOM traversing for the slideUp / slideDown an acceptable way of achieving what I'm trying to do? Are there any disadvantages to how I'm doing it and can it be improved?

Answer 1

try this way

$("input:radio[name=homepageContent], input:radio[name=addSocialIcons], input:radio[name=addTracking]").click(function() {
    var value = $(this).val();
    if (value == 'yes') {
        $(this).parents('.seperator').next().slideDown();          
        $(this).parents('.seperator').next().next().slideDown();
    } else {
        $(this).parents('.seperator').next().slideUp();
        $(this).parents('.seperator').next().next().slideUp();
    }
});

EDIT ​

and also a point

wrap your code inside

$(document).ready(function(){});

like this

$(document).ready(function(){

    $("input:radio[name=homepageContent], input:radio[name=addSocialIcons], input:radio[name=addTracking]").click(function() {
        var value = $(this).val();
        if (value == 'yes') {
            $(this).parents('.seperator').next().slideDown();          
            $(this).parents('.seperator').next().next().slideDown();
        } else {
            $(this).parents('.seperator').next().slideUp();
            $(this).parents('.seperator').next().next().slideUp();
        }
    });


});

Answer 2

Answer to #1

As Anthony Grist pointed out, there doesn't seem to be an issue with the click function.

Answer to #2

Your DOM traversal seem a bit unnecessary. In fact, your DOM structure is in need of rearrangement.

• Using a checkbox instead of radio buttons. A checkbox only accepts two values: true or false, or in your case, yes or no. It seems more suitable.
• Encapsulate your extras inner and extras outer divs inside your item div instead of having it next to the checkbox. This way, you make it easier to traverse within the item.

Also, you should read up on the different types of traverse functions JQuery has:

• .parent() / .parents()
• .children()
• .closest()
• .next()
• .prev()
• .siblings()
• .find()
• and many more.

Knowing all of these traverse functions, you'll most likely never ever do parent().parent().parent()... again. :)

Here's a JSFiddle example | Code

HTML

<ul>
    <li class='item'>
        <label>
            <input class="homepageContent" name="homepageContent" type="checkbox" value="yes" />
            Item 1
        </label>
        <div class='extras'>
            <div class='inner'>
                <label>
                    Your Content:<textarea name="content"></textarea>
                </label>
            </div>
            <div class='outer'>
                <a href="#" class="makeChanges">Make Changes</a>
                <span>Click "Make Changes" to update.</span>
            </div>
        </div>
    </li>
</ul>

Javascript

$("input:checkbox").click(function() {
    var $this = $(this),
        $item = $(this).closest(".item");

    if($this.is(':checked')){
        $(".extras", $item).slideDown();
    }else{
        $(".extras", $item).slideUp();
    }
});

CSS

.extras{
    display: none;
}

Answer 3

That is working for me in FF (jsfiddle), although the DOM looks a little convoluted (I'm guessing because it's missing a lot of your other CSS/resources).

I think you can simplify the jQuery selectors a lot. Generally, using simple ID or class selectors will make the your page much more performant (and simpler!)

$('.homepageContent').click(function() {
    var value = $(this).val();
    if (value == 'yes') {
        $('.extrasInner').slideDown();          
        $('.extrasOuter').slideDown();
    } else {
        $('.extrasInner').slideUp();
        $('.extrasOuter').slideUp();
    }
});

Hopefully doing something like this makes it work cross browser better too.

Answer 4

Value of the radio button will always be same, no matter it is checked or not. If you want to know the particular radio button is checked or not then use this code. Based on the status of the radio button do your stuff.

var value = $(this).attr('checked')