Can't Update Dijit Widget copied into a Dialog

Question

I'm slowly building up the functionality of a popup dialog containing a form. It works with one exception. In the onClick event on the button, I want to update a value in the form. It updates the value, but only in the div (emailForm) that was input into the form. I have the div set to display so I can see the update. How do I update it in the myDialog object?

<div id="emailForm" Executive Director>
<h1>Contact Form</h1>
<p>Feel free to drop us a line.</p>
<form id="contact-form" action="confirmation.php" method="post">
    <fieldset class="contact-fieldset">
        <ol>
            <li>
                <label for="to">To:</label>
                <input id="to" name="to" type="text" size="40" value="Staff" disabled>
            </li>
            <li>
                <label for="message">Message:</label>
                <textarea id="message" name="message"></textarea>
            </li>
        </ol>
        <input type="submit" class="contact-submit" value="Send">
    </fieldset>
</form>
</div>
<script>
require(["dojo/dom",
        "dijit/Dialog",
        "dijit/form/TextBox",
        "dijit/form/Textarea",
        "dojo/domReady!"],
        function(dom, Dialog, TextBox, TextArea)
{
    toText = new TextBox({readOnly: "readOnly" , value: "Staff"},"to");
    messageText = new TextArea({placeholder: "Your message"},message);

    var emForm = dom.byId("emailForm").innerHTML;

    myDialog = new Dialog({
        title: "My Dialog",
        content: emForm,
        style: "width: 600px"
    });
});

require(["dijit/form/Button",
        "dojo/domReady!"],
        function(Button)
{
    var showEmailBtn = new Button({
    onClick: function(evt){
        toText.set("value","Executive Director");
        myDialog.show(); } },
    "showEmail");
});
</script>

Update

Based on tik27's description of the problem, I tried the following test:

<script>
require(["dojo/dom",
        "dijit/Dialog",
        "dijit/form/TextBox",
        "dijit/form/Textarea",
        "dojo/domReady!"],
        function(dom, Dialog, TextBox, TextArea)
{
    var emForm = '<div id="emailForm" Executive Director><h1>Contact Form</h1><form id="contact-form" action="confirmation.php" method="post"><fieldset class="contact-fieldset"><ol><li><label for="to">To:</label><input id="to" name="to" type="text" size="40" value="Gereral" disabled></li></ol><input type="submit" class="contact-submit" value="Send"></fieldset></form></div>';

    myDialog = new Dialog({
        title: "My Dialog",
        content: emForm,
        style: "width: 600px"
    });
    toText = new TextBox({readOnly: "readOnly" , value: "Staff"},"to");
});

require(["dojo/dom",
        "dijit/form/Button",
        "dojo/domReady!"],
        function(dom, Button)
{
    var showEmailBtn = new Button({
    onClick: function(evt){
        toText.set("value","Executive Director");
        myDialog.show(); } },
    "showEmail");
});
</script>

This fixes the problem. The html shown is only a small test of the complete form. How can I keep the html separate from the script and then bring it in without duplicating the id's? I looked into templates, but that seems overkill.

Update 2

Again, based on some Tik27 suggested, I tried this:

<script id="emailHTML" type="text/template">
    <div id="emailForm" Executive Director>
        <!-- Same html as above in emailForm -->
    </div>
</script>
<script>
require(["dojo/dom",
        "dijit/Dialog",
        "dijit/form/TextBox",
        "dijit/form/Textarea",
        "dojo/domReady!"],
        function(dom, Dialog, TextBox, TextArea)
{

    myDialog = new Dialog({
        title: "My Dialog",
        content: dom.byId("emailHTML").textContent,
        style: "width: 600px"
    });
    toText = new TextBox({readOnly: "readOnly" , value: "Staff"},"to");
});

require(["dojo/dom",
        "dijit/form/Button",
        "dojo/domReady!"],
        function(dom, Button)
{
    var showEmailBtn = new Button({
    onClick: function(evt){
        toText.set("value","Executive Director");
        myDialog.show(); } },
    "showEmail");
});
</script>

The browser ignores anything in the text/template script so the id's only added once to the DOM. Do a search on this site for more information on the script type.

Answer 1

The problem here with the way you are doing this, is that there ends up being to inputs with the id="to". Ids are supposed to be unique in html. If you want to do it this way, i suggest that you put your form info into a script tag with type="text/template".

But is there a reason you just don't create it declaratively?

<div id="emailForm" data-dojo-type="dijit.Dialog" style="display:none">
<h1>Contact Form</h1>
<p>Feel free to drop us a line.</p>
<form id="contact-form" action="confirmation.php" method="post">
    <fieldset class="contact-fieldset">
        <ol>
            <li>
                <label for="to">To:</label>
                <input data-dojo-type="dijit.form.TextBox" data-dojo-props="readOnly: 'readOnly' , value:'Staff'" id="to" name="to" type="text" size="40">
            </li>
            <li>
                <label for="message">Message:</label>
<textarea id="message" name="message" data-dojo-type="dijit.form.Textarea" data-dojo-props="placeholder: 'Your message'"></textarea>
            </li>
        </ol>
        <input type="submit" class="contact-submit" value="Send">
    </fieldset>
</form>
</div>

<div id="showEmail">Show</div>

<script>
require(["dijit/form/Button",
    "dijit/registry","dojo/dom",
    "dijit/Dialog",
    "dijit/form/TextBox",
    "dijit/form/Textarea"],
        function(Button,registry)
{
    var showEmailBtn = new Button({
    onClick: function(evt){

        registry.byId("emailForm").show();
        registry.byId("to").set("value","Executive Director");
    } }, "showEmail");
});
</script>

Fiddle:: http://jsfiddle.net/ZJ735/