Setting textarea to display:none loses the value when trying to save

Question

I have a textarea where the user can enter in a note. But this textarea will only display if a checkbox is ticked, otherwise it is hidden. But when the save button is clicked and it saves the values to the database, the textarea is returning a blank value.

Code for textarea:

<textarea class="mceEditorWide" id="txtAddDetailNote" rows="30" cols="50" style="width:100%;display:none" runat="server"></textarea>

Checkbox that hides/shows textbox:

 $('#<%= chkNotes.ClientID %>').change(function () {
        if($(this).is(":checked")) {
             $('#<%= txtAddDetailNote.ClientID %>').show(); 
            } 
        else { 
               $('#<%= txtAddDetailNote.ClientID %>').hide(); 

            }
    });

When I remove the display:none from the textarea, it saves the value. But with display:none in the code, it only returns a blank value, even though the textarea is displaying when I click the save button.

Answer 1

You could toggle the element's visibility css style:

$("#someSelector").css("visibility", "collapse");
$("#someSelector").css("visibility", "visible");

...and if necessary, set it's height to a sub-pixel value, such as 0.001px