Gets or sets the jqxForm's padding.

$('#sampleForm').jqxForm({
	padding: { left: 10, top: 10, right: 10, bottom: 10 }
});
							

Gets or sets the jqxForm's backgroundColor.

$('#sampleForm').jqxForm({
	backgroundColor: '#fafafa';
});
							

Gets or sets the jqxForm's borderColor.

$('#sampleForm').jqxForm({
	borderColor: '#fafafa';
});
							

Gets or sets the jqxForm's value.

var sampleValue = {
	firstName: 'John',
	lastName: 'Scott',
	address: '1st Ave SW',
	company: 'N/A',
	city: 'San Antonio',
	state: 'Texas',
	zip: '78209'
};

$('#sampleForm').jqxForm({
	template: template,
	value: sampleValue,
	backgroundColor: '#fafafa',
	padding: { left: 10, top: 10, right: 10, bottom: 10 }
});
							

Gets or sets the jqxForm's template. Each object in the template, represents a Form row. Each row can have one field with label or multiple fields(if the current object's columns property is defined).

Template options:

• bind - Sets a template's member Name.
• type - Sets a template member's type. Possible values: 'text', 'option', 'blank', 'button', 'color', 'number', 'boolean', 'password', 'label', 'time', 'date', 'datetime', 'custom'.
• label - Sets the label displayed next to the field.
• labelWidth - Sets the with o label displayed next to the field.
• required - Sets whether the field is optional or not.
• info - Sets the field information icon's tooltip.
• infoPosition - Sets the information icon's position.
• component - Sets the component's type. 'jqxDropDownList' when type is 'option'. By default, the component type is jqxRadioButton for the 'option' type.
• options - Sets the 'option' type's options.
• init - Sets the callback function for 'custom' type initialization.
• rowHeight - Sets the row's height.
• width - Sets the row's width.
• columns - Sets the row's columns.
• align - Sets the alignment of the field. Possible values: 'right', 'center', 'left'
• valign - Sets the vertical alignment of the field. Possible values: 'top', 'center', 'bottom'
• columnWidth - Sets the column's width.

var template = [
	{
		bind: 'firstName',
		type: 'text',
		label: 'First name',
		required: true,
		labelWidth: '80px',
		width: '250px',
		info: 'Enter first name',
		infoPosition: 'right'
	},
	{
		bind: 'lastName',
		type: 'text',
		label: 'Last name',
		required: true,
		labelWidth: '80px',
		width: '250px',
		info: 'Enter last name'
	},  
	{
		bind: 'company',
		type: 'text',
		label: 'Company',
		required: false,
		labelWidth: '80px',
		width: '250px'
	},
	{
		bind: 'address',
		type: 'text',
		label: 'Address',
		required: true,
		labelWidth: '80px',
		width: '250px'
	},
	{
		bind: 'city',
		type: 'text',
		label: 'City',
		required: true,
		labelWidth: '80px',
		width: '250px'
	},
	{
		bind: 'state',
		type: 'option',
		label: 'State',
		required: true,
		labelWidth: '80px',
		width: '250px',
		component: 'jqxDropDownList',
		options: [
			{ value: 'California' },
			{ value: 'New York'},
			{ value: 'Oregon'},
			{ value: 'Illinois'},
			{ value: 'Texas'}
		]
	},
	{
		bind: 'zip',
		type: 'text',
		label: 'Zip code',
		required: true,
		labelWidth: '80px',
		width: '250px'
	},
	{
		type: 'blank',
		rowHeight: '10px'
	},
	{
		columns: [
			{
				type: 'button',
				text: 'Sign up',
				width: '90px',
				height: '30px',
				rowHeight: '40px',
				columnWidth: '50%',
				align: 'right'
			},
			{
				type: 'button',
				text: 'Cancel',
				width: '90px',
				height: '30px',
				rowHeight: '40px',
				columnWidth: '50%'
			}                
		]
	}
];


var sampleValue = {
	firstName: 'John',
	lastName: 'Scott',
	address: '1st Ave SW',
	company: 'N/A',
	city: 'San Antonio',
	state: 'Texas',
	zip: '78209'
};

$('#sampleForm').jqxForm({
	template: template,
	value: sampleValue,
	backgroundColor: '#fafafa',
	padding: { left: 10, top: 10, right: 10, bottom: 10 }
});

							

Binds to the 'formDataChange' event.

sampleForm.on('formDataChange', function (event) {
	var args = event.args;
	var newValue = args.value;
	var previousValue = args.previousValue;

	for (var i in newValue) {
		var newInputValue = newValue[i]; // current input's value.
		var previousInputValue = previousValue[i]; // previous input's value.
	}
});

Binds to the 'buttonClick' event.

sampleForm.on('buttonClick', function (event) {
	var args = event.args;
	var text = args.text // clicked button's text.;
	var name = args.name // clicked button's name.;
});

Refreshes the Form value and re-renders it.

$('#sampleForm').jqxForm('refresh');

$('#sampleForm').jqxForm('destroy');

Sets or gets the value of the object to bind to the form.

Submits the form.

var btn = sampleForm.jqxForm('getComponentByName', 'submitButton');
btn.on('click', function () {
	// function: submit
	// arg1: url
	// arg2, optional: target, default is _blank
	// arg3, optional: submit method - GET or POST, default is POST
	sampleForm.jqxForm('submit', "https://www.jqwidgets.com/form_demo/", "_blank", 'POST');
});

Gets a form input element by name.

var btn = sampleForm.jqxForm('getComponentByName', 'submitButton');
btn.on('click', function () {
	// function: submit
	// arg1: url
	// arg2, optional: target, default is _blank
	// arg3, optional: submit method - GET or POST, default is POST
	sampleForm.jqxForm('submit', "https://www.jqwidgets.com/form_demo/", "_blank", 'POST');
});