Remove From My Forums

disable controls in a div area?

Question
0

Sign in to vote

User-2104551191 posted

Hi friends,

I have a div with controls like textboxes and drop downs which are all inside a table structure.

Would like to disable the whole div or make controls read only on page load. How can i achieve it javascript or css.. thank you

Thursday, November 2, 2017 1:15 PM

Answers

User-1838255255 posted

Hi akpaga22,

I make a modify based of your code, you want to pass parent page control to the child window to print, then disable control, I think you need use jQuery to disable, not CSS. Here is the complete sample code, please check:

Sample Code:

Page.aspx:

<head runat="server">
</head>
<body>
    <form id="form1" runat="server">
        <div id="test">
            hello
        <br />
            <asp:TextBox ID="DataForm" runat="server" CssClass="DataForm"></asp:TextBox>
        </div>
        <input id="Button1" type="button" value="button" onclick="getPrint('test')" />
    </form>
    <script>
        function getPrint(print_area) {
            var pp = window.open('', '', 'letf=0,top=0,width=850,height=800,toolbar=0,scrollbars=1,status=0');
            pp.document.writeln('<HTML><HEAD><title Id="printPreviewTitle" class="hidden-control">Print Preview</title>')
            pp.document.writeln('\x3Cscript src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">\x3C/script>')
            pp.document.writeln('<LINK href=Print.css ' + 'type="text/css" rel="stylesheet" media="print">')
            pp.document.writeln('\x3Cscript type="text/javascript">var thtml=window.opener.document.getElementById("' + print_area + '").innerHTML; document.write(thtml);$(".DataForm").attr("disabled", "disabled");\x3C/script>');
            pp.document.writeln('<base target="_blank"></HEAD>')
            pp.document.writeln("<body MS_POSITIONING='GridLayout' bottomMargin='0'");
            pp.document.writeln(' leftMargin="0" topMargin="0" rightMargin="0">');
            pp.document.writeln('<form method="post">');
            pp.document.writeln('<TABLE width=100%><TR><TD></TD></TR><TR><TD align=right>');
            pp.document.writeln('<INPUT ID="btnPrint" type="button" value="Print" class="hidden-control" ');
            pp.document.writeln('onclick="window.print()">');
            pp.document.writeln('<INPUT ID="CLOSE" type="button" ' +
                                'value="Close" class="hidden-control" onclick="window.close();">');
            pp.document.writeln('</TD></TR><TR><TD></TD></TR></TABLE>');
            pp.document.writeln('</form></body></HTML>');
        };
    </script>
</body>

Best Regards,

Eric Du

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

Monday, November 6, 2017 7:15 AM

All replies

User2103319870 posted

akpaga22
I have a div with controls like textboxes and drop downs which are all inside a table structure.

You can try with below code to disable all controls inside a div

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#div1").find('input,select').prop('disabled',true);
        });

    </script>

HTML

<div id="div1">
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>
</div>

Sample Demo

if you have other controls like button then you can change the code like below

 $(document).ready(function () {
            $("#div1").find('input, textarea, button, select').prop('disabled',true);
        });

Thursday, November 2, 2017 1:29 PM

User1992938117 posted

I hope you can use jQuery, try as below code:

<div id="disabled">
  First name:
  <br>
  <input type="text" name="firstname" value="Mickey">
  <br> Last name:
  <br>
  <input type="text" name="lastname" value="Mouse">
  <br>
</div>
<div id="enabled">
  First name:
  <br>
  <input type="text" name="firstname" value="Mickey">
  <br> Last name:
  <br>
  <input type="text" name="lastname" value="Mouse">
  <br>
</div>

Call below code on document.ready()

$(document).ready(function(){
    $("#disabled *").attr('disabled', 'disabled');
});

Sample

Thursday, November 2, 2017 1:41 PM

User-2104551191 posted

Hi all..thank you for the response...but i am having trouble at the line of code as below:

The below code is not making the controls read only.

pp.document.writeln('<script type="text/javascript">$("DataForm").addClass("disabledbutton");</script>') --- this line works fine in an aspx as stand alone javascript code. The controls are rendered readonly. Css code is shown below.

.disabledbutton {
    pointer-events: none;
    opacity: 0.9;
}

The over all code is as below:

function getPrint(print_area) {
    var pp = window.open('', '', 'letf=0,top=0,width=850,height=800,toolbar=0,scrollbars=1,status=0');
    //alert(print_area);
    //Adding HTML opening tag with <HEAD> … </HEAD> portion 
    pp.document.writeln('<HTML><HEAD><title Id="printPreviewTitle" class="hidden-control">Print Preview</title>')
    pp.document.writeln('<link href="Content/PrintStyle.css" rel="stylesheet">')
    pp.document.writeln('<LINK href=Print.css ' + 'type="text/css" rel="stylesheet" media="print">')
    pp.document.writeln('<script type="text/javascript">$("DataForm").addClass("disabledbutton");</script>')
    pp.document.writeln('<base target="_blank"></HEAD>')
    //Adding Body Tag
    pp.document.writeln('<body MS_POSITIONING="GridLayout" bottomMargin="0"');
    pp.document.writeln(' leftMargin="0" topMargin="0" rightMargin="0">');
    //Adding form Tag
    pp.document.writeln('<form method="post">');
    //Creating two buttons Print and Close within a HTML table
    pp.document.writeln('<TABLE width=100%><TR><TD></TD></TR><TR><TD align=right>');
    pp.document.writeln('<INPUT ID="btnPrint" type="button" value="Print" class="hidden-control" ');
    pp.document.writeln('onclick="javascript:location.reload(true);window.print();">');
    pp.document.writeln('<INPUT ID="CLOSE" type="button" ' +
                        'value="Close" class="hidden-control" onclick="window.close();">');
    pp.document.writeln('</TD></TR><TR><TD></TD></TR></TABLE>');

    //Writing print area of the calling page
    pp.document.writeln(document.getElementById(print_area).innerHTML);
    //Ending Tag of </form>, </body> and </HTML>
    pp.document.writeln('</form></body></HTML>');
};

Thursday, November 2, 2017 6:37 PM

User-1838255255 posted

Hi akpaga22,

According to your description, I have copy your code in myside, I get the same error as you in my VS. I make the following modify, it works. Please check:

Sample Code:

<head runat="server">
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script>
        $(function () {
            getPrint("box");
        });
        function getPrint(print_area) {
            var pp = window.open('', '', 'letf=0,top=0,width=850,height=800,toolbar=0,scrollbars=1,status=0');
            //alert(print_area);
            //Adding HTML opening tag with <HEAD> … </HEAD> portion 
            pp.document.writeln('<HTML><HEAD><title Id="printPreviewTitle" class="hidden-control">Print Preview</title>')
            pp.document.writeln('<link href="Content/PrintStyle.css" rel="stylesheet">')
            pp.document.writeln('<LINK href=Print.css ' + 'type="text/css" rel="stylesheet" media="print">')
            pp.document.writeln('\x3Cscript type="text/javascript"> $("DataForm").addClass("disabledbutton")\x3C/script>');
            pp.document.writeln('<base target="_blank"></HEAD>')
            //Adding Body Tag 
            pp.document.writeln("<body MS_POSITIONING='GridLayout' bottomMargin='0'");
            pp.document.writeln(' leftMargin="0" topMargin="0" rightMargin="0">');
            //Adding form Tag
            pp.document.writeln('<form method="post">');
            //Creating two buttons Print and Close within a HTML table
            pp.document.writeln('<TABLE width=100%><TR><TD></TD></TR><TR><TD align=right>');
            pp.document.writeln('<INPUT ID="btnPrint" type="button" value="Print" class="hidden-control" ');
            pp.document.writeln('onclick="javascript:location.reload(true);window.print();">');
            pp.document.writeln('<INPUT ID="CLOSE" type="button" ' +
                                'value="Close" class="hidden-control" onclick="window.close();">');
            pp.document.writeln('</TD></TR><TR><TD></TD></TR></TABLE>');
            pp.document.writeln('document.getElementById(print_area).innerHTML');
            pp.document.writeln('</form></body></HTML>');
        };
    </script>
</head>

Best Regards,

Eric Du

Friday, November 3, 2017 8:05 AM

0

Sign in to vote

User-2104551191 posted

No Eric not working for me still..

Friday, November 3, 2017 1:51 PM

User-1838255255 posted

Hi akpaga22,

Sample Code:

Page.aspx:

<head runat="server">
</head>
<body>
    <form id="form1" runat="server">
        <div id="test">
            hello
        <br />
            <asp:TextBox ID="DataForm" runat="server" CssClass="DataForm"></asp:TextBox>
        </div>
        <input id="Button1" type="button" value="button" onclick="getPrint('test')" />
    </form>
    <script>
        function getPrint(print_area) {
            var pp = window.open('', '', 'letf=0,top=0,width=850,height=800,toolbar=0,scrollbars=1,status=0');
            pp.document.writeln('<HTML><HEAD><title Id="printPreviewTitle" class="hidden-control">Print Preview</title>')
            pp.document.writeln('\x3Cscript src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">\x3C/script>')
            pp.document.writeln('<LINK href=Print.css ' + 'type="text/css" rel="stylesheet" media="print">')
            pp.document.writeln('\x3Cscript type="text/javascript">var thtml=window.opener.document.getElementById("' + print_area + '").innerHTML; document.write(thtml);$(".DataForm").attr("disabled", "disabled");\x3C/script>');
            pp.document.writeln('<base target="_blank"></HEAD>')
            pp.document.writeln("<body MS_POSITIONING='GridLayout' bottomMargin='0'");
            pp.document.writeln(' leftMargin="0" topMargin="0" rightMargin="0">');
            pp.document.writeln('<form method="post">');
            pp.document.writeln('<TABLE width=100%><TR><TD></TD></TR><TR><TD align=right>');
            pp.document.writeln('<INPUT ID="btnPrint" type="button" value="Print" class="hidden-control" ');
            pp.document.writeln('onclick="window.print()">');
            pp.document.writeln('<INPUT ID="CLOSE" type="button" ' +
                                'value="Close" class="hidden-control" onclick="window.close();">');
            pp.document.writeln('</TD></TR><TR><TD></TD></TR></TABLE>');
            pp.document.writeln('</form></body></HTML>');
        };
    </script>
</body>

Best Regards,

Eric Du

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

Monday, November 6, 2017 7:15 AM

Answered by:

disable controls in a div area?

Question

Answers

All replies

akpaga22