Question

我有一个textarea，用户可以在其中输入注释。但是这个textarea只会在勾选复选框时显示，否则会隐藏。但是，当单击保存按钮并将值保存到数据库时，textarea将返回空值。

textarea代码：

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

隐藏/显示文本框的复选框：

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

            }
    });

当我从textarea中删除display:none时，它会保存该值。但是在代码中使用display:none时，它只返回一个空值，即使单击保存按钮时显示textarea也是如此。

Answer 1

您可以切换元素的visibility css样式：

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

...如有必要，请将其高度设置为子像素值，例如0.001px

Answer 2

回答这个问题： 仍然不确定为什么将textarea设置为display:none导致它丢失该值，但将显示设置为<tr>标签解决了这个问题。

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>

隐藏/显示代码：

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

将display:none设置为<tr>并为其命名并不会影响textarea的值。

Answer 3

您必须在文本框中使用属性禁用。那么只有它不会返回任何东西。如果你使用display：none它不会在浏览器中显示文本框，但它会在帖子上向控制器发送空值

文本框代码：

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

隐藏/显示文本框的复选框：

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

            }
    });

希望这会有所帮助

Answer 4

我不完全明白你要做什么，你能提供更多代码吗？小提琴？

试试这个：

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


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

显示/隐藏textarea有一个更简单的实现。当您提交表单时，您可以看到textarea的值被警告。

这是一个有效的例子：

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

此外，您可以插入自己的代码来拦截表单提交，并在发送之前对发送到服务器的实际数据执行任何操作：

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

将textarea设置为display：none在尝试保存时丢失该值

4 个答案: