How print an InvoiceNo on each page from an input field that has just been entered

Question

I have an Invoice (produced in HTML) where the user enters into a form field the "InvoiceNo" - and then prints (ie on paper) the invoice.

This works fine, but the invoice is now to go onto a 2nd page(s).

I've done the pagebreak with CSS and HTML:

.pagebreak { page-break-after: always; } 

&

<div class="pagebreak" /> </div>

But I don't know how to get the InvoiceNo onto the 2nd page. I've tried:

<form>Invoice No: <input type="input" name="Invoice_No" id="Invoice_No" onblur="getInvoiceNo()" />  <!-- nb onblur is opposite of onfocus -->

<script>
function getInvoiceNo() { 
    var Invoice_No = document.getElementById('Invoice_No').value;
}
<script>

Then on the 2nd page

<script>
document.write( Invoice_No + "XXX" );   /* xxx are for testing if its outputting*/
<script>

But it's not working ;-( How should it be done?

PS I don't have access to PHP as the invoice is part of a Shopify (an eShop) environmant

Answer 1

Base upon what I see, I think you are running into scope issues with your JavaScript. If you declare a var in a function, you are not able to access that var somewhere else without making it global (please do not do this as it is bad practice), making it an object property, or passing it as a parameter. I do not know how many pages you will have in your invoice but if it is always 2 pages, you might want to create a input text box on the second page and have your function modify the value of that input text box instead of storing the value into a var. I also suggest using a JavaScript library like jQuery to avoid cross browser issues.