Input field hidden dynamically can not be shown later

Question

I have a form with a text input and a radio button pair used to select yes/no. For purposes of keeping this simple, the radio button click event checks the value and if yes, it shows the input text field. If no, it hides the input field. I also check the initial state on document ready and show/hide the input text field.

I find that clicking No results in the input hiding using a jQuery.hide() method. But when I select Yes the resulting.show() method call does not show the input. If I set the radio to Yes and then refresh the page then the input shows up just fine.

Firebug show no input tag. It's like clicking No radio deleted the input from the DOM.

Here's the JS code sample:

    $(document).ready(function() {
        if ($('#cost_sharing_yes').attr('checked') == 'checked') {
            $('input#Institutional_CS_TP').show();
        } else {
            $('input#Institutional_CS_TP').hide();
        }

        $('#cost_sharing_yes').click(function() {
            $('input[id="Institutional_CS_TP"]').show();
        });
        $('#cost_sharing_no').click(function() {
            $('input#Institutional_CS_TP').fadeOut("fast");
        });
    }        

Answer 1

You are missing ) for closing ready function:

$(document).ready(function() {

} // <--  

For getting the checked property of the inputs perperly you should use prop method instead of attr .

$(document).ready(function() {
   var isChecked = $('#cost_sharing_yes').prop('checked');
   $('#Institutional_CS_TP').toggle(isChecked);
   // ..
})

Answer 2

I figured out my problem. It was a self-inflicted coding problem. To keep the example simple I had removed another function call in the mix that I didn't think had any bearing on the problem. I was wrong. In that function I had

    $('td#Institutional_CS_TP).text('$0');
    $('input[name="Institutional_CS_TP"]').val('0.00');

This resulted in only the td value showing, not the input inside that same td. Both my td and the input tags inside the td had the same ID values...not a good idea.

Answer 3

html code

<div id="myRadioGroup">

    Value Based<input type="radio" name="cars"  value="2"  />

    Percent Based<input type="radio" name="cars" value="3" />
    <br>
    <div id="Cars2" class="desc" style="display: none;">
        <br>
        <label for="txtPassportNumber">Commission Value</label>
       <input type="text" id="txtPassportNumber" class="form-control" name="commision_value" />
    </div>
    <div id="Cars3" class="desc" style="display: none;">
        <br>
        <label for="txtPassportNumber">Commission Percent</label>
       <input type="text" id="txtPassportNumber" class="form-control" name="commision_percent" />
    </div>
</div>

Jquery code

function myFunction() {
    var x = document.getElementById("myInput");
    if (x.type === "password") {
        x.type = "text";
    } else {
        x.type = "password";
    }
}

function myFunction1() {
    var y = document.getElementById("myInput1");
    if (y.type === "password") {
        y.type = "text";
    } else {
        y.type = "password";
    }
}