CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
user990016
user990016

Reputation: 3378

Radio buttons don't toggle properly

I'm working on a page that has a pair of radio buttons for Yes & No. If Yes is clicked I want to display a particular div (class="green") and if No is clicked, display a different div (class="blue"). It's a Coldfusion page using Jquery and Twitter bootstrap. The page is at http://dev.taxtalent.com/employers/post-a-tax-job-new?adtype=Basic. The radio buttons in question are near the bottom of the page (Are you a current member? ). The excerpt of the code in question is;

     <style>

        .boxA{
            <cfif current_member_flag NEQ "true">display: none;</cfif>
        }.boxB{
            <cfif signup_member_flag NEQ "true">display: none;</cfif>
        }
    </style>

    <script type="text/javascript">
        jQuery(document).ready(function(){

            jQuery('#current_member').click(function(){
                jQuery(".green").toggle();
                jQuery(".blue").toggle();
            });
    });
</script>

<div style="font-weight:bold; " align="left">
    Are you a current member?
</div>
    <table width="100%"  valign="top">  
        <tr>
            <td>
            <input type="radio" name="current_member" id="current_member" value="login" /> Yes 
            <input type="radio" name="current_member" id="current_member" value="signup" /> No
            </td>
        </tr>
    </table>

Upvotes: 0

Views: 1878

Answers (4)

Gert Grenander
Gert Grenander

Reputation: 17084

As everyone has already mentioned, the IDs should be unique. But you don't really need them, so just delete the two id="current_member". Then the solution is:

$(function(){
  $(":radio[name='current_member']").click(function(){
    var isLogin=this.value==='login';

    $(".green").toggle(isLogin);
    $(".blue").toggle(!isLogin);
  });
});

Upvotes: 0

Vijay
Vijay

Reputation: 3023

There are few loopholes (bad-practices) in your code.

  1. Do not repeat Id's in DOM. Id is said to be identical for the loaded Document, so you should always ensure No two elements have same Id.

    <input type="radio" name="current_member" id="current_member1" value="login" /> Yes <input type="radio" name="current_member" id="current_member2" value="signup" /> No

  2. If you are using radio group, you just need a same name for all the radio inputs and different values for each. Until you want to operate on a specific radio, you should not provide Id (since this is of no use).

    <input type="radio" name="current_member" value="login" /> Yes <input type="radio" name="current_member" value="signup" /> No

  3. In the jQuery change event, you should fetch the value instead of Id. This is important because if you use a radio plugin in future (like iphone checkbox/radio) it makes use of 'value' rather than id.

    if($(this).val() == "login")

  4. Suggestion: you can use data attributes to make your code generic. You need not to hardcode the classname & divId which you want to hide/show.

in HTML:

<input type="radio" name="current_member" value="login" data-show="#green" data-hide=".divContent" /> Yes 
<input type="radio" name="current_member" value="signup" data-show="#blue" data-hide=".divContent" /> No

in jQuery:

$("input[name='group']").change(function () {
        var divToHide = $(this).data('hide');
        var divToShow = $(this).data('show');
        $(divToHide).hide();
        $(divToShow).show();
});

jsfiddle: http://jsfiddle.net/tk622pua/1/

Upvotes: 1

mattfetz
mattfetz

Reputation: 425

Few issue with your code which are fixed here.

http://jsfiddle.net/tk622pua/

Html

<div style="font-weight:bold; " align="left">
    Are you a current member?
</div>
    <table width="100%"  valign="top">  
        <tr>
            <td>
            <input type="radio" name="group" id="yes" value="login" /> Yes 
            <input type="radio" name="group" id="no" value="signup" /> No
            </td>
        </tr>
    </table>
<div style="display:none" class="divClass" id="green">
    green
</div>
<div style="display:none" class="divClass" id="blue">
    blue
</div>

Jquery

$(document).ready(function(){

    $("input[name='group']").change(function(){
        $(".divClass").hide()
        if($(this).attr('id') == "yes"){
            $("#green").show()
        }else{
            $("#blue").show()
        }
    });
});

You can't have 2 elements have the same Id. Id's are unique. You need to group the radio buttons with the name as I did below. As for the jquery you can use the hide and show calls to display the divs.

Upvotes: 2

james00794
james00794

Reputation: 1147

The "id" attribute of an HTML element has to be unique to the page. You have two different elements that both have the same id. So the click handler that you have defined is only being called when the "Yes" input is clicked. Instead, define your click handler like this:

jQuery("input[name='current_member']").click(function(){ ... }

Upvotes: 2

Related Questions