How to obtain inputs within dijit/form/Form?

Question

I's using dijit/form/Form to contain my inputs and then encounter problem when I attempt to submit a dijit/form/Form, when I have a submit button in this form, it can be submited successfully but redirect to another page (Spring MVC acts a server side), and if I remove this submit button I don't know how to get the inputs of this form.

If there is any method for dijit/form/Form to get its inputs so that I could submit it.

Thanks.

Answer 1

dijit/form/Form contains a few utilities that work with Dijit form widgets (dijit/form/TextBox, dijit/form/Select, ...). I don't know if you're using those or not, but the answer is quite similar with or without. The idea is t oserialize your form to an object and to submit that form using AJAX calls.

With Dijit form widgets

If you use the Dijit form widgets, you can serialize the entire form using getValues() on your form widget. This will serialize the form for you:

xhr.post("mySubmitUrl", {
    data: registry.byId("myForm").getValues()
}).then(function() {
   console.log("Success"); 
});

I also made a JSFiddle to demonstrate this.

---

With native form elements

If you're using native form elements, you have no advantage of using dijit/form/Form. To serialize the form you can use the function toObject() from the dojo/dom-form module. This function requires you to pass a form DOM node.

This means you can either pass the domnode of your dijit/form/Form widget, or entirely skip this part and just access the DOM node directly.

xhr.post("mySubmitUrl", {
    data: domForm.toObject(registry.byId("myForm").domNode)
}).then(function() {
    console.log("Success"); 
});

An example JSFiddle can be found here.

---

Now on the server-side (Spring), you just add a method that will handle that specific request, for example:

@RequestMapping(value = "mySubmitUrl", method = RequestMethod.POST)
public void doPostForm(@RequestParam("name") String name, @RequestParam("firstname") String firstname) {
    // Do stuff
}

Answer 2

You can use a jquery ajax call and inside the data you can pass the values in JSON and success and error page to check if success then load the block as per your requirement and error on if timeout or other errors