Remove From My Forums

How do I disable entire form on page load until a link is clicked?

Question

User1216627406 posted

Greetings again experts,

I got my great start with this JS script here.

I got great help and used the help to get the code to work perfectly for us.

Just a bit of history.

The app we are building with this code has three links, Manage Clients, Manage Sermon Messages and Shoot Log Management.

Then there are three corresponding sections with similar titles.

Each section has its own gridview control which is embedded in Panel with control ID.

Each time a user clicks on any link, say Manage Clients, the other two Panels are automatically disabled.

All of this works great.

The only issue is that when a user loads the page, a user can click on any section to begin editing.

We would like to have all sections, essentially, the form disabled on page load.

This forces the user to click on any of the links to enable the highlighed section and makes it editable while keeping the other two sections disabled until again a user clicks on another link to enable the corresponding section while disabling the other.

I hope this is not terribly confusing.

Thank you for your help in advance.

    <style type="text/css">
        .selected {
            background-color: red !important;
        }

    </style>
    <script type="text/javascript">
      $(function () {
	$("a").click(function (event) {
	//debugger;
	//$("div").removeClass('selected');
	//$("div").attr('disabled', true);

	$(".pnlDiv").removeClass('selected');
	$(".pnlDiv").each(function () {
		$(this).children().find('*').attr('disabled', true);
	});

	var href = event.target.href;
	var targetId = href.split("#")[1];
	$("#" + targetId).addClass('selected');
	$("#" + targetId).children().find('*').attr('disabled', false);
      });
     });
   </script>
   
   <body>
    <form id="form1" runat="server">
     <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>   
      <div>
       <span style="color:cornflowerblue;font-weight:bold;font-size:12px;margin-left:40px;"><a href="#clientPanel">-MANAGE CLIENTS</a></span><br />
       <span style="color:cornflowerblue;font-weight:bold;font-size:12px;margin-left:40px;"><a href="#SermonPanel">-MANAGE SERMONS MESSAGES</a></span><br />
       <span style="color:cornflowerblue;font-weight:bold;font-size:12px;margin-left:40px;"><a href="#LogPanel">-SHOOT LOG MANAGEMENT</a></span><br />
       
       <asp:Panel ID="clientPanel" runat="server" CssClass="pnlDiv">
         //GridView controls go here...
       </asp:Panel>
       
       <asp:Panel ID="SermonPanel" runat="server" CssClass="pnlDiv">
        //GridView controls go here...
       </asp:Panel>
       
       <asp:Panel ID="LogPanel" runat="server" CssClass="pnlDiv" style="width:95%;">
        //GridView controls go here...
       </asp:Panel> 
      </form>
    </div>
   </body>

I am just posting a code snippet.

Wednesday, March 10, 2021 1:28 AM

Answers

User-939850651 posted

Hi simflex,

If you want to achieve your requirements through script code, you can try to disable element mouse DMO events, such as click, hover, etc.

Just use pointer-events: none; to achieve the corresponding effect.

Something like this:

<head runat="server">
    <title></title>
    <script src="Scripts/jquery-3.5.1.min.js"></script>
    <style type="text/css">
        .disabled {
            pointer-events: none;
        }

        .selected {
            background-color: red !important;
        }
    </style>
    <script type="text/javascript">
        $(function () {

            $('.pnlDiv').addClass('disabled');

            $("a").click(function (event) {
                $(".pnlDiv").removeClass('selected');

                var href = event.target.href;
                var targetId = href.split("#")[1];

                $("#" + targetId).addClass('selected');
                $("#" + targetId).removeClass('disabled');
                $('.pnlDiv').each(function () {
                    if (this.id != targetId) {
                        $('#' + this.id).addClass('disabled');
                    }
                }) 
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">

        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div>
            <span style="color: cornflowerblue; font-weight: bold; font-size: 12px; margin-left: 40px;"><a href="#clientPanel">-MANAGE CLIENTS</a></span><br />
            <span style="color: cornflowerblue; font-weight: bold; font-size: 12px; margin-left: 40px;"><a href="#SermonPanel">-MANAGE SERMONS MESSAGES</a></span><br />
            <span style="color: cornflowerblue; font-weight: bold; font-size: 12px; margin-left: 40px;"><a href="#LogPanel">-SHOOT LOG MANAGEMENT</a></span><br />
            <hr />
            <asp:Panel ID="clientPanel" runat="server" CssClass="pnlDiv">
                //GridView controls go here...<br />
                <asp:TextBox runat="server" />
                <asp:TextBox runat="server" />
            </asp:Panel>
            <hr />
            <asp:Panel ID="SermonPanel" runat="server" CssClass="pnlDiv">
                //GridView controls go here...<br />
                <asp:TextBox runat="server" />
                <asp:TextBox runat="server" />
            </asp:Panel>
            <hr />
            <asp:Panel ID="LogPanel" runat="server" CssClass="pnlDiv" Style="width: 95%;">
                //GridView controls go here...<br />
                <asp:TextBox runat="server" />
                <asp:TextBox runat="server" />
            </asp:Panel>
        </div>
    </form>
</body>

Result:

Hope this can help you.

Best regards,

Xudong Peng

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Wednesday, March 10, 2021 7:52 AM

All replies