locked
Print a form without input fields RRS feed

  • Question

  • User1052662409 posted

    Hi All,

    I have a requirement. I have a form with some controls (textbox, file uploads, dropdownlist, buttons).

    Is there any tricky method through which I can print only content not the input fields. Kile if I have a selected item in dropdown list or a tet in textbox then in print preview it should show only text not the control.

    Although I can do print with a different approach, by creating a new form with only labels or  Literal or maybe span etc. fetch all values in a label , Literal.

    Please suggest.

    Thursday, May 14, 2020 8:34 AM

Answers

  • User1535942433 posted

    Hi demoninside9,

    Accroding to your description,as far as I think,you could clone the window and you could replace these control tag in the new window.

    More details,you could refer to below codes:

        <script src="Scripts/jquery-3.1.1.min.js"></script>
        <script>
            $(function () {
                $("#Button1").click(function () {
                    event.preventDefault();
                    var divToPrint = $("#div_content_print").clone();
                    var newDiv = divToPrint.find("input[type=text]").replaceWith("<span>" + $("input[type=text]").val() + "</span>") + divToPrint.find("select").replaceWith("<span>" + $("select").val() + "</span>")
                    newWin = window.open("");
                    newWin.document.write(divToPrint.html());
                    newWin.print();
                    newWin.close();
                })
            })
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="div_content_print">
                <asp:TextBox ID="TextBox1" runat="server" Text="122"></asp:TextBox>
                <asp:DropDownList ID="DropDownList1" runat="server">
                    <asp:ListItem Value="1" Text="1"></asp:ListItem>
                    <asp:ListItem Value="2" Text="3"></asp:ListItem>
                </asp:DropDownList>
                <asp:Button ID="Button1" runat="server" Text="Button" />
            </div>
        </form>
    </body>
    

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 15, 2020 3:48 AM

All replies

  • User753101303 posted

    Hi,

    If you do want something that is always close from your actual form you could try https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Targeting_media_types to see if applying printing only styles could be enough (hidding menus, removing borders aroiund controls or changing their background color etc...).

    Might be tricky for the "select" tag depending what is enough (or maybe have an hidden replacement text just for that?). If the printed style is not close enough then it's likely best to create a separare view.

    Thursday, May 14, 2020 10:42 AM
  • User415553908 posted

    You could try mark all your inputs with a data- attribute (or filter them in any other way with JQuery) and use a piece of javascript to get input values and hide original elements behind new spans :

    $('*[data-printable="true"]', context).each(function() {
      $("<span />", { text: this.value}).insertAfter(this);
      $(this).hide();
    });
    Thursday, May 14, 2020 10:47 AM
  • User1535942433 posted

    Hi demoninside9,

    Accroding to your description,as far as I think,you could clone the window and you could replace these control tag in the new window.

    More details,you could refer to below codes:

        <script src="Scripts/jquery-3.1.1.min.js"></script>
        <script>
            $(function () {
                $("#Button1").click(function () {
                    event.preventDefault();
                    var divToPrint = $("#div_content_print").clone();
                    var newDiv = divToPrint.find("input[type=text]").replaceWith("<span>" + $("input[type=text]").val() + "</span>") + divToPrint.find("select").replaceWith("<span>" + $("select").val() + "</span>")
                    newWin = window.open("");
                    newWin.document.write(divToPrint.html());
                    newWin.print();
                    newWin.close();
                })
            })
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="div_content_print">
                <asp:TextBox ID="TextBox1" runat="server" Text="122"></asp:TextBox>
                <asp:DropDownList ID="DropDownList1" runat="server">
                    <asp:ListItem Value="1" Text="1"></asp:ListItem>
                    <asp:ListItem Value="2" Text="3"></asp:ListItem>
                </asp:DropDownList>
                <asp:Button ID="Button1" runat="server" Text="Button" />
            </div>
        </form>
    </body>
    

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 15, 2020 3:48 AM