Fill Out These Forms

The most common way to submit data from a web application to the backend is through a form. The Form template not only produces a bare-bones form structure, but will serialize and submit forms as well. It also has a built-in Feedback option to provide users with form submission results, and some default setup features for Form Validation. These setup defaults can also be extended with other validators.

Example

var form = new Form({
	template : $('#orderForm'),
	// by setting useTemplate to true, Form will control 
	// this form element instead of cloning it for re-use (default)
	useTemplate : true,
	// how to serialize checkboxes (default)
	checkboxMode: FormSerializer.checkboxMode.number,
	// how to serialize form data (default)
	serializeMode : FormSerializer.serializeMode.toString,
	// the URL to POST to
	submitUrl : '/user/data/',
	validator : Form.validators.formValidation,
});

Submit

Form submission is as simple as calling submit which comes from jQuery, but is re-routed through Form. First the data will be serialized, then it will be submitted either to the submitUrl or a submitRequest function specified in the options during construction.

var form = new Form({
    template : $('#someForm'),
    submitRequest : Server.submitSomeForm
});
// call manually, or let the Submit button do the work by default
form.sumbit();

Pre-populate

As with all Templates, Form can be pre-populated with incoming server data, necessary for showing users what is currently set if they need to update the backend.

var serverData = {
   id : 1,
   date : "Aug 8, 2016",
   quantity : 44
};
// all form inputs will be populated by associating 
// the input [name] attributes with serverData key names
form.populateForm(serverData);

Serializer

Due to jQuery already containing a serialize method, Forms are serialized via the serializer method (note the "r"). Two sub-components take care of this serialization: FormSerializer and FormSerializerData. They do not need to be understood to use Form, but it may help.

FormSerializer

FormSerializer takes care of the actual serialization process - it runs through each input or select in a form, and based on its tag and type, converts each input into an object. These objects have a name property whose value is the name attribute of the input or select, and a val property whose value is the value of the input or select.

FormSerializerData

FormSerializerData is a simple object whose data property contains the values of form inputs once set. After this, three methods provide alternative ways to output the serialized data.

• toString - default mode; converts the serialized data into a string

Example

// each object contains the name of a form input and its value
var data = new FormSerializerData({
   {
      name : "age",
      val: 22
   },
   {
      name : "userName",
      val : "User2"
    }
});
var sData = data.toString(); // age=22&userName=User2

---

• toOrderedString - if the backend needs data as a string in some sort of order, toOrderedString will look at the order property of each data object. Note that this must be set in during the form serialization process. If no order property is found, it will be appended to the end of the string.

Example

var data = new FormSerializerData({
   {
      name : "age",
      val: 22,
      order : 2
   },
   {
      name : "userName",
      val : "User2",
      order : 1
    }
});
var sData = data.toOrderedString; // userName=User2&age=22

---

• toObject - outputs the data into simple objects

var data = new FormSerializerData({
   {
      name : "age",
      val: 22
   },
   {
      name : "userName",
      val : "User2"
    }
});
var sData = data.toObject(); // {age:22, userName:"User2}