CODEWITHSUNDEEP
javascriptc#jqueryasp.nettextbox
user123456789
user123456789

Reputation: 2004

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

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.

Upvotes: 5

Views: 4088

Answers (4)

user123456789
user123456789

Reputation: 2004

Answer to this question: Still not sure why setting the textarea to display:none was causing it to lose the value, but setting the display to the <tr> tag solved this.

Code for textarea:

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

Code to hide/show it:

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

Setting display:none to the <tr> and giving it a class name doesn't effect the value from the textarea.

Upvotes: 2

Alain Nisam
Alain Nisam

Reputation: 680

I don't exactly get what you are to do, can you supply more code? A fiddle?

Try this out:

$('.checkbox').change(function() {
  var ShowHide = $(this).is(":checked") ? $('.mceEditorWide').show() : $('.mceEditorWide').hide();
});


$(document).on('submit', $('form'), function(e) {
  e.preventDefault();
  alert($('.mceEditorWide').val());
})

There is a simpler implementation of showing/hiding the textarea AND when you submit the form, you can see the value of the textarea alerted.

Here's a working example:

https://jsfiddle.net/nebulousal/4bnjfLc8/

Also, you could insert your own code to intercept the form submission and do whatever you want to the actual data that is going to the server before it is sent:

$(document).on('submit', $('form'), function(e) {
  e.preventDefault();
  //Do whatever you want to do to any data in the form
  //Then send it off to the server
})

Upvotes: 0

spender
spender

Reputation: 120498

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

Upvotes: 2

anand
anand

Reputation: 1579

you have to use attribute disable in the textbox. then only it will not return anything.if u use display:none it will not the textbox in browser but it send empty value to controller on post

Code for textbox:

<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 %>').removeAttr('disabled','disabled').show();
            } 
        else { 
               $('#<%= txtAddDetailNote.ClientID %>').attr('disabled','disabled').hide();

            }
    });

hope this helps

Upvotes: 0

Related Questions