input text field on javascript radio click

Question

I have three radio buttons

   <input type="radio" name="selection" class="selection" data-id='0' value="search" checked="checked" />Search for a client
    <input type="radio" name="selection" class="selection" data-id='0' value="sel" />Mass E-mail
    <input type="radio" name="selection" class="selection" data-id='0' value="others" onclick="getElementById('other').style.display = null;" />Other E-mail 

on select I need to change the text fields and get different text fields on different selects.

Here is my function

$('.selection').live('click',function(){
        var id =  $(this).attr('data-id');
        if(id == 0){id='';}
        var selectedVal = $(this).val();
        if(selectedVal=='sel'){
            $('#customer_search_query'+id).attr('style','display:none');
            $('#customers_email_address'+id).attr('style','display:inline');
            $('#customer_id'+id).val('');
            $('#customer_search_query'+id).val('');
            $('#customers_email_address'+id).val('');
             $('#other'+id).attr('style','display:none');
        }else if(selectedVal=='search'){
            $('#customer_search_query'+id).attr('style','display:inline');
            $('#customers_email_address'+id).attr('style','display:none');
            $('#customer_id'+id).val('');
            $('#customer_search_query'+id).val('');
            $('#customers_email_address'+id).val('');
             $('#other'+id).attr('style','display:none');
        }
        else {
            $('#customer_search_query'+id).attr('style','display:none');
            $('#customers_email_address'+id).attr('style','display:none');
            $('#other'+id).attr('style','display:inline');
        }
    });

The problem, on first two radio buttons, it is working perfectly but on third click I need simple text field and it is not working. This is existing script on this system. Please let me know if I missed any thing.

Answer 1

You need to remove the onclick event from the third control to go through the jQuery function (onclick="document.getElementById('other').style.display = null;"):

 $('.selection').live('click', function() { var id = $(this).attr('data-id'); if (id == 0) { id = ''; } var selectedVal = $(this).val(); if (selectedVal == 'sel') { $('#customer_search_query' + id).attr('style', 'display:none'); $('#customers_email_address' + id).attr('style', 'display:inline'); $('#customer_id' + id).val(''); $('#customer_search_query' + id).val(''); $('#customers_email_address' + id).val(''); $('#other' + id).attr('style', 'display:none'); } else if (selectedVal == 'search') { $('#customer_search_query' + id).attr('style', 'display:inline'); $('#customers_email_address' + id).attr('style', 'display:none'); $('#customer_id' + id).val(''); $('#customer_search_query' + id).val(''); $('#customers_email_address' + id).val(''); $('#other' + id).attr('style', 'display:none'); } else { $('#customer_search_query' + id).attr('style', 'display:none'); $('#customers_email_address' + id).attr('style', 'display:none'); $('#other' + id).attr('style', 'display:inline'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <input type="radio" name="selection" class="selection" data-id='0' value="search" checked="checked" />Search for a client <input type="radio" name="selection" class="selection" data-id='0' value="sel" />Mass E-mail <input type="radio" name="selection" class="selection" data-id='0' id="other" value="others" />Other E-mail