Dojo dialog - how to save contents of dialog

Question

I am new to dojo and I have been following the tutorials mentioned here http://dojotoolkit.org/reference-guide/1.7/dijit/Dialog.html

I am not sure how to capture the data entered in dialog

<script type="text/javascript">
 require(["dojo/ready", "dijit/Dialog", "dijit/form/Button"], 

  function(ready, Dialog, Button){
    ready(function(){
        var myDialog = new Dialog({
            title: "Add",
            style: "width: 600px"
        });

        var myButton = new Button({
            onClick: function(){
                myDialog.set("content", getDialog());
                myDialog.show();
            }
        }, "progbutton");
    });
});

function getDialog(){
  return document.getElementById('add-link-dialog-container').innerHTML;
}


</script>

Html:

  <div id="add-link-dialog-container" style="display:none;"> 
        <div>
           <table class="dijitDialogPaneContentArea">
             <tr>
              <td><label for="name">Name:</label></td>
              <td><input data-dojo-type="dijit/form/TextBox" name="name" id="name" value="Test"/></td>
             </tr>
             <tr>
               <td><label for="address">Address:</label></td>
               <td><input data-dojo-type="dijit/form/TextBox" name="address" id="address"/></td>
             </tr>
            </table>

           <div class="dijitDialogPaneActionBar">
               <button dojoType="dijit.form.Button" type="submit" id="ok">Add</button>
               <button dojoType="dijit.form.Button" type="button" id="cancel">Cancel</button>
           </div>
         </div> 
       </div>
       <button id="progbutton" type="button">Add New</button>

The dialog does pop up. But how do I capture the data entered in the fields? Is there any better way to do this?

Answer 1

If the dialog is being opened, then you should be able to use the dijit/registry module to retrieve your form fields (and thus, also your values/data).

For example:

require([ "dijit/registry" ], function(registry) {
    registry.byId("ok").on("click", function() {
        registry.byId("address").get("value"); // Will return the "address" value
    });
});

The question of course is, when do you add the onClick event handler to your button. You have to wait until the dialog is loaded until you can add an event handler to it. Good thing, the dijit/Dialog has an event called onLoad which we can use.

For example:

myDialog.on("load", function() {
    registry.byId("ok").on("click", function() {
        registry.byId("address").get("value"); // Will return the "address" value
    });
});

However, if you're interesting in submitting all form data, you should take a look at the dijit/form/Form widget which allows you to get/set the form values, validate the form and submit it as well.