Textarea display setting: none lose value when trying to save

Question

I have a text box in which the user can enter a note. But this text box will be displayed only if the checkbox is checked, otherwise it will be hidden. But when you click the save button and save the values ​​in the database, the text field returns an empty value.

Code for text field:

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

A checkbox that hides / displays a text field:

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

When I remove display:none from the text box, it saves the value. But with display:none in the code, it only returns a null value, even if the text area is displayed when I click the save button.

Answer 1

Answer this question: Still do not know why setting textarea to display:none caused a value for it, but setting the display to the <tr> was solved.

Code for text field:

 <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 <tr> and assigning it a class name does not affect the value from the text field.

Answer 2

You can switch the visibility css style:

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

... and, if necessary, set the height to a subpixel value, for example 0.001px

Answer 3

you need to use the disable attribute in the text box. then only he will not return anything. If you use a display: none of them will be in the text box in the browser, but it will send an empty value to the controller on the post

Code for text field:

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

A checkbox that hides / displays a text field:

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

hope this helps

Answer 4

I don’t quite understand what you should do, can you provide more code? Violin?

Try the following:

 $('.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 a text field. And when you submit the form, you can see the value of the notified text field.

Here is a working example:

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

In addition, you can insert your own code to intercept the form submission and do whatever you want, before the actual data that arrives at the server before it is submitted:

 $(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 })