Form submission canceled because the form is not connected

I have a child page inheriting from a master, there are 2 buttons on the page. One for printing the contents of a div, and the other for exporting the contents of a div to MS Excel.

Clicking the Excel button works fine every time until I click the 'Print' button (which works every time), after that I get the form is not connected error.

Doing the same on a 'non-master/child' page does not produce the error, so obviously it has something to do with the form element residing on the master.

Here is the mark-up:

<%@ Page Title="" Language="VB" MasterPageFile="~/main.master" AutoEventWireup="false" CodeFile="FormTest.aspx.vb" Inherits="FormTest" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    EXCEL PRINT TEST
    <br />
    <asp:LinkButton runat="server" ID="cmdExport" CssClass="btn btn-info">Export to Excel</asp:LinkButton>
    <br />
    <input name="b_print2" type="button" onclick="printdiv('divPrint');" value="Print" />
    <br />
    <div runat="server" id="divExcel">
        <div id="divPrint">
            <br />
            Print and export content here
        </div>
    </div>

    <script type="text/javascript">

        // =========================================
        // Function to print the contents of a DIV
        // =========================================

        function printdiv(printpage) {            
            var headstr = "<html><head><title></title></head><body>";
            var footstr = "</body>";
            var newstr = document.all.item(printpage).innerHTML;
            var oldstr = document.body.innerHTML;
            document.body.innerHTML = headstr + newstr + footstr;
            window.print();
            document.body.innerHTML = oldstr;
            return false;
        }
    </script>
</asp:Content>

Open in new window

BrianFordAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

louisfrCommented:
Instead of modifying your page, you can use styles to mark what must be printed and what must not.
<style>
    @media not print {
        .printable.only {
            display: none
        }
    }
    @media print {
        :not(.printable) {
            display: none
        }
    }
</style>

Open in new window

Mark what you want to print with the "printable" class. Mark what you want to print but not display with "printable only".
<p class="printable">Printable information.</p>
<p class="printable only">Printable information, not displayed.</p>
<p>Displayed information, not printable.</p>

Open in new window

You can then use "window.print()" to print the page according to those classes.
BrianFordAuthor Commented:
I'll give that try
thanks
BrianFordAuthor Commented:
I tried your suggestion and it fixed the original error but now nothing prints. When I click the 'Print' button, the print preview opens but there's no contents (see screenshots)

Page viewPrint Preview
Here's my adjusted code:

    <style>
        @media not print {
            .printable.only {
                display: none
            }
        }

        @media print {
            :not(.printable) {
                display: none
            }
        }
    </style>

    <br />
    <asp:LinkButton runat="server" ID="cmdExport" CssClass="btn btn-info">
        <span class="fa fa-file-excel-o"></span>
        Export to Excel
    </asp:LinkButton>
    &nbsp;
    <input name="b_print2" type="button" class="btn btn-success" onclick="window.print()" value="Print" />
    <br /><br />
    <div runat="server" id="divExcel" class="printable">
        <div class="printable">
            <p>
                THIS SHOULD PRINT
            </p>
        </div>
    </div>

Open in new window

Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

louisfrCommented:
You need to mark some things as printable in the master page, or be more specific in the style definition:
@media print {
    .body-content :not(.printable) {
        display: none
    }
}

Open in new window

BrianFordAuthor Commented:
I tried that, in-fact I created a new HTML file (no master/child) and I still get blank print. If I change the style to .body-content :not(.printable) { then it prints 'everything' on the page, including everything outside the 'printable' class

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="css/print.css" rel="stylesheet" media="print" />
    <style>
        /*Print only, not displayed on screen */
        @media not print {
            .printable.only {
                display: none;
            }
        }


        /* Only print items with 'printable' class */
        @media print {
            .body-content :not(.printable) {
                display: none;
            }
        }
    </style>
</head>
<body>
    <br />
    <input name="b_print2" type="button" class="btn btn-success" onclick="window.print()" value="Print" />
    <br />
    <br />
    <div class="printable">
        THIS SHOULD PRINT
    </div>
    This should NOT print

</body>
</html>

Open in new window

louisfrCommented:
Your last page prints everything because there is nothing with the "body-content" class. Here is what I see in the master page on my sample:
        <div class="container body-content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
            <hr />
            <footer>
                <p>&copy; <%: DateTime.Now.Year %> - Mon ASP.NET Application</p>
            </footer>
        </div>

Open in new window

louisfrCommented:
You can simplify things by making a "notprintable" class instead:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="css/print.css" rel="stylesheet" media="print" />
    <style>
        @media print {
            .notprintable {
                display: none;
            }
        }
    </style>
</head>
<body>
    <br />
    <input name="b_print2" type="button" class="btn btn-success" onclick="window.print()" value="Print" />
    <br />
    <br />
    <div>
        THIS SHOULD PRINT
    </div>
    <div class="notprintable">
        This should NOT print
    </div>
</body>
</html>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
BrianFordAuthor Commented:
Thanks for you help, your last suggestion worked well for me.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.