I have a button that is designed for printing. When the print button is clicked, I want the focus to then shift to another button. However, my current code is not functioning properly.
The error message displayed in Firebug reads
TypeError: document.getElementById(...) is null
. The printing process itself completes successfully, but the focus does not move to the "btn_CR" button afterwards.
How can I ensure that after printing, the focus is automatically directed to the "btn_CR" button? Do I need to incorporate server-side scripts or can this be resolved with JavaScript? Your assistance is greatly appreciated.
Here is a snippet of my ASPX code:
<asp:Content ID="AdminContent" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<asp:Panel ID="print_Client_registration" Visible="false" runat="server">
<div id="printIt">
<div style="width: 260px;font-family:Arial,Helvetica, sans-serif;">
<div style="text-align: center; width: 100%; font-size: 15px;"><b>
<asp:Label ID="lblClientId" runat="server" /></b></div>
<div style="text-align: left; width: 100%; font-size: 13px;"><b>Name:</b>
<asp:Label ID="lblName" runat="server" /></div>
</div>
</div>
<asp:Button ID="btn_print" runat="server" ClientIDMode="Static" Text="Print" OnClientClick="printPage();"/>
<div>
<table class="nostyle">
<tr>
<td><input type="button" id="btn_CR" runat="server" value="Client Register" onclick="window.location.href = 'NewClientRegister.aspx'" /></td>
</tr>
</table>
</div>
</asp:Panel>
<script type="text/javascript">
var NextFocusButtonId = <%=btn_CR.ClientID%>;
</script>
<script type="text/javascript" src="../scripts/print.js"></script>
</asp:Content>
An important note: the printPage() function belongs to the external "print.js" file.
function printPage() {
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var newstr = document.getElementById("printIt").innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = newstr;
window.print();
document.body.innerHTML = oldstr;
document.getElementById('<%=btn_CR.ClientID%>').focus();
}
After following suggestions, I updated the code from:
document.getElementById('<%=btn_CR.ClientID%>').focus();
To simply:
document.getElementById('btn_CR').focus();
Despite this adjustment, the same error persists -
TypeError: document.getElementById(...) is null
.