HtmlService GAS pass variables between html forms

Question

I have created two HTML pages page1.html and page2.html. How can I pass an ID from page1 to page2 on a button click in page1?

code.gs:

function addAuc(form) { 
    var s1 = form.ID, 
        s2 = form.Name, 
        s3 = form.Email, 
        html = HtmlService.createTemplateFromFile('page2');

    html.setSandboxMode(HtmlService.SandboxMode.NATIVE);
    html.setWidth(700);
    html.setHeight(600); SpreadsheetApp.getUi().showModelessDialog(html, 'Reg'); 
    return s1; 
}

page1.html:

<form id="myForm">
    <input type="button" value="Choose" onclick="google.script.run.withSuccessHandler(updateUrl).rowArray()" />
    <input  onclick="google.script.run.addAuc(document.forms[0])" type="button" value="Add" />
    <input type="button" value="Close" onclick="google.script.host.close()" /><br/>
    <label id="Name"></label>
</form>
<label id="ID">1</label>|
<label id="Name">Jon</label>|
<label id="Email">jon@email.com</label>|
<label id="Phone">004423554897</label>

page2.html:

<div class="info" >
    <span id="ID" name="ID"></span>
</div>

Answer 1

In your example you would pass the variable to the 'html' template object.

html = HtmlService.createTemplateFromFile('page2');
html.id = s1;

Then in page 2 use the the tag to print out the id value;

<div class="info" >
    <span id="ID" name="ID"><?=id?></span>
</div>