Question

I have a form like this (from a widget template):

   '<div>' +
    '  <form data-dojo-type="dijit.form.Form" data-dojo-attach-point="form" method="POST"> ' +
    '    <label for="${id}_workspace">Workspace name</label>  ' +
    '    <input name="workspace" id="${id}_workspace" data-dojo-attach-point="workspace" data-dojo-type="app.ValidationWorkspace" />' +
    '    <label for="${id}_password1">Password</label>  ' +
    '    <input name="password[0]" id="${id}_password1" data-dojo-attach-point="password1" data-dojo-type="app.ValidationPassword" />' +
    '    <label for="${id}_password1">Confirm password</label>  ' +
    '    <input name="password[1]" id="${id}_password2" data-dojo-attach-point="password2" data-dojo-type="app.ValidationPassword" />' +
    '    <input type="submit" data-dojo-attach-point="button" data-dojo-type="app.BusyButton" label="Create!" />' +
    '  </form>' +
    '</div>',

In the code, I wrote:

        data = {};
        data.workspace = that.workspace.get('value');
        data.password = [];
        data.password[0] = that.password1.get('value');
        data.password[1] = that.password2.get('value');

        // Store the data 
        g.stores.workspacesAnon.put(data).then(
          function(res){
            console.log("Jsonrest put(data) returned OK: " + json.toJson(res) );
            that.button.cancel();
          }
        );

Two actual questions:

1. If I use that.form.value.email instead of that.password1.get(‘value’), sometimes outdated values are submitted to the form (!). For example, if I type something in the password2 field and hit enter straight away, the actual submission happens for the expected in Dojo? How come does it happen?

2. Is there a better way to get the form’s values, so that ‘password[0]’ and ‘password[1]’ become an array automatically etc.?

Answer 1

Every widget under dijit.form makes sure that the one form element with the correct name is updated with its value, even if the values are something like a filtering select click or a date in a calendar.

With that said, we know that a common form.submit() will work as expected.

However while doing the submission as an AJAX request, we need to loop the form-elements for their values and make it a json key value object.

You have it easy, dojo.xhrPost does this internally if called like this:

dojo.xhrPost ( {
   url: 'submiturl.sapi',
   form: dojo.byId('myFormDomId')
} )

For higher level of control you can use either dojo.formToJson or dijit.form.Form.getValues – e.g. these two variants

var values = dojo.formToJson(dojo.byId('myFormDomId'));
// OR
var values = dijit.byId('myFormDijitId').getValues();
// mod or mixin your custom values, examplewise
values = dojo.mixin(values, {   anotherVariable: 'sentAsPostParam'   });

dojo.xhrPost ( {
    url: 'submitUrl.sapi',
    content : values
} );

In regards to your first question 1)
If a validator is attached to the widget email – and the validation renders in-valid, the input element is not set accordingly. Setting value is done once there’s either 1 – keyup event or 2 – onblur event. To ensure that correct values are sent, use dijit.form.Form.validate (seeing as you allready have extended your form dojoType) like this

var formWidget = dijit.byId('myFormDijitId');
if(formWidget.validate()) {  // loops all form widgets and 'sums' up their validators
   dojo.xhrPost( { url: 'submiturl.sapi', content: formWidget.getValues() } );
}

EDIT:

specifically for creating a nested array within the item, OP needs for the JsonRest store – it is nescessary to call the input elements by the excact same name, e.g.

<input name="password" 
                        id="${id}_password1" data-dojo-attach-point="password1" data-dojo-type="app.ValidationPassword" />
<input name="password" 
                        id="${id}_password2" data-dojo-attach-point="password2" data-dojo-type="app.ValidationPassword" />

Also, make use of dojo.formToJson on the native form element, like so (do it after validation to assert values being set):

    g.stores.workspacesAnon.put(
       dojo.formToJson(widgetReference.form.domNode)
    ).then( ... );