单击按钮时文本框消失答案

【问题标题】：Textboxs vanish when button is clicked单击按钮时文本框消失
【发布时间】：2013-12-12 16:07:38
【问题描述】：

我在使用一些 Jquery 后遇到了问题。

我正在使用 VS 2013、asp.net、VB。

我在页面上有一个面板，显示何时从网格视图中选择了一行。它包含几个文本框和一个下拉列表。我有一个 jquery 脚本，它根据从下拉列表中选择的内容隐藏/显示页面上的文本框。代码如下。

 <script>
    function jScript() {

            $('#LowerText').hide();
            $('#UpperText').hide();
            $('#min').hide();
            $('#max').hide();
            $('#CommentsText').hide();
            $('#ChangeStatusPnl').css({ "height": "200px" })

            $('#AssetStatusChoice').change(function () {
            if ($('#AssetStatusChoice').val() == "Fully Available")
            {
                $('#CommentsText').hide();
                $('#LowerText').hide();
                $('#UpperText').hide();
                $('#min').hide();
                $('#max').hide();
                $('#ChangeStatusPnl').css({ "height": "200px" })

            }
            if ($('#AssetStatusChoice').val() == "Restricted")
            {
                $('#LowerText').show();
                $('#UpperText').show();
                $('#CommentsText').show();
                $('#min').show();
                $('#max').show();
                $('#ChangeStatusPnl').css({ "height": "340px" })


            }
            if ($('#AssetStatusChoice').val() == "Unavailable")
            {
                $('#LowerText').hide();
                $('#UpperText').hide();
                $('#min').hide();
                $('#max').hide();
                $('#CommentsText').show();
                $('#ChangeStatusPnl').css({ "height": "280px" })


            }
        });
        };

            </script>

这很好用。

当用户单击面板上的提交按钮时，在文本框中输入的数据将保存到 MS SQL DB。我为每个文本框添加了一些代码来验证添加的内容（所以它不是空白的，或者应该有数字的地方有字母）。此代码的示例如下所示。如果出现错误，它会更改边框的颜色。此外，我还添加了一行代码，以在出现验证问题时停止 SQL 存储过程的执行。

Dim isValid As Boolean
    isValid = True
    Dim intValidate As Integer
    If Not Integer.TryParse(TimeTextHrs.Text, intValidate) Or TimeTextHrs.Text = "" Then

        AssetPopUp.Show()
        TimeTextHrs.BorderColor = Drawing.Color.Red
        isValid = False

    End If

我的问题是，当用户在面板中单击提交时，由于在下拉列表中选择的内容而现在可见的框消失了，就好像它重新加载了面板一样。我需要它们保持可见。如果您查看上面的 JQuery，您可以看到何时从下拉列表中选择了受限制的 3 个文本框显示。当用户点击提交时，这些就消失了。

希望一切都有意义。

【问题讨论】：

你真的很喜欢一遍又一遍地重复你的代码。
感谢您的有用评论。我只是在运行一个测试，所以当我投入生产时我会清理它。它是我使用的第一个 jquery，所以我还在学习。

标签： javascript jquery asp.net vb.net

【解决方案1】：

你将不得不在页面加载时运行一些 js 来设置可见性。

您还应该考虑重构此逻辑，使其更易于维护。

       $(function() {

       if ($('#AssetStatusChoice').val() == "Fully Available")
        {
            $('#CommentsText').hide();
            $('#LowerText').hide();
            $('#UpperText').hide();
            $('#min').hide();
            $('#max').hide();
            $('#ChangeStatusPnl').css({ "height": "200px" })

        }
        if ($('#AssetStatusChoice').val() == "Restricted")
        {
            $('#LowerText').show();
            $('#UpperText').show();
            $('#CommentsText').show();
            $('#min').show();
            $('#max').show();
            $('#ChangeStatusPnl').css({ "height": "340px" })


        }
        if ($('#AssetStatusChoice').val() == "Unavailable")
        {
            $('#LowerText').hide();
            $('#UpperText').hide();
            $('#min').hide();
            $('#max').hide();
            $('#CommentsText').show();
            $('#ChangeStatusPnl').css({ "height": "280px" })


        }

});

【讨论】：