# inputEx - Form Usage

## Basic Form creation

Use the following code to create a basic inputEx Form.

new inputEx.Form( { fields: [ {type: 'select', label: 'Title', name: 'title', choices: [{ value: 'Mr' }, { value: 'Mrs' }, { value: 'Ms' }] }, {label: 'Firstname', name: 'firstname', required: true, value:'Jacques' }, {label: 'Lastname', name: 'lastname', value:'Dupont' }, {type:'email', label: 'Email', name: 'email'}, {type:'url', label: 'Website',name:'website'} ], buttons: [{type: 'submit', value: 'Change'}], parentEl: 'container1' });

## Multi-group Form

Use the following code to create a Form with multiple Groups (fieldsets).

new inputEx.Form( { fields: [ { type:'group', legend:'group 1', name:'group1', fields:[ {type: 'select', label: 'Title', name: 'title', choices: [{ value: 'Mr' }, { value: 'Mrs' }, { value: 'Ms' }] }, {label: 'Firstname', name: 'firstname', required: true, value:'Jacques' }, {label: 'Lastname', name: 'lastname', value:'Dupont' } ] }, { type:'group', legend:'group 2', name:'group2', fields:[ {type:'email', label: 'Email', name: 'email'}, {type:'url', label: 'Website',name:'website'} ] } ], buttons: [{type: 'submit', value: 'Change'}], parentEl: 'container2' });

## Send in json with ajax

How to send the form data using Ajax

new inputEx.Form( { fields: [ { type: 'select', label: 'Title', name: 'title', choices: [{ value: 'Mr' }, { value: 'Mrs' }, { value: 'Ms' }] }, { label: 'Firstname', name: 'firstname', required: true, value:'Jacques' }, { label: 'Lastname', name: 'lastname', value:'Dupont' } ], buttons: [{type: 'submit', value: 'Change'}], parentEl: 'container3', ajax: { method: 'POST', uri: 'default.php', callback: { success: function(o) { alert("success", o); }, failure: function(o) { alert("failure", o); } }, showMask:true } });

## Send with ajax using url encoded parameters

How to send the form data using Ajax

new inputEx.Form( { fields: [ { type: 'select', label: 'Title', name: 'title', choices: [{ value: 'Mr' }, { value: 'Mrs' }, { value: 'Ms' }] }, { label: 'Firstname', name: 'firstname', required: true, value:'Jacques' }, { label: 'Lastname', name: 'lastname', value:'Dupont' } ], buttons: [{type: 'submit', value: 'Change'}], parentEl: 'container4', ajax: { method: 'POST', uri: 'default.php', contentType: "application/x-www-form-urlencoded", callback: { success: function(o) { alert("success", o); }, failure: function(o) { alert("failure", o); } }, showMask:true } });

## Send with ajax using url encoded parameters wrapped in an object

Use wrapObject

new inputEx.Form( { fields: [ { type: 'select', label: 'Title', name: 'title', choices: [{ value: 'Mr' }, { value: 'Mrs' }, { value: 'Ms' }] }, { label: 'Firstname', name: 'firstname', required: true, value:'Jacques' }, { label: 'Lastname', name: 'lastname', value:'Dupont' } ], buttons: [{type: 'submit', value: 'Change'}], parentEl: 'container5', ajax: { method: 'POST', uri: 'default.php', contentType: "application/x-www-form-urlencoded", wrapObject: "person", callback: { success: function(o) { alert("success", o); }, failure: function(o) { alert("failure", o); } }, showMask:true } });

## Setting and getting form value

Use the following code to set or get the value from javascript

var form6 = new inputEx.Form( { fields: [ {type: 'select', label: 'Title', name: 'title', choices: [{ value: 'Mr' }, { value: 'Mrs' }, { value: 'Ms' }], value:'Mr' }, {label: 'Firstname', name: 'firstname', required: true, value:'Jacques' }, {label: 'Lastname', name: 'lastname', value:'Dupont' }, { type: 'group', legend: 'Emails', name: 'emails', fields: [ {type:'email', label: 'Email 1', name:'first'}, {type:'email', label: 'Email 2', name:'second'} ] } ], buttons: [ { type: 'submit', value: 'Set form value', onClick: function(e) { // e === clickEvent (inputEx.widget.Button custom event) // valueObject : object to be passed to setValue function // its structure is { field_name : field_value, ... } var valueObject = { title:"Mrs", firstname:"Candy", lastname:"Jones", // note the nested object when setting value of a form with a 'group' field : emails:{ first:'first@email.com', second:'second@email.com' } }; form6.setValue(valueObject); return false; // stop clickEvent, to prevent form submitting } }, { type: 'submit', value: 'Get form value', onClick:function(e) { // e === clickEvent (inputEx.widget.Button custom event) var valueAsJsObject = form6.getValue(); var valueAsJsonString = YAHOO.lang.JSON.stringify(valueAsJsObject); alert(valueAsJsonString); return false; // stop clickEvent, to prevent form submitting } } ], parentEl: 'container6' });

## Different button types

Use the following code to create submit buttons, or "link" buttons.

var confirmation = { message : "Are you sure you want to submit ?", handler : function() { if (!confirm(this.message)) { return false; // return false to prevent form submit } } }; var form7 = new inputEx.Form( { fields: [ {type: 'select', label: 'Title', name: 'title', choices: [{ value: 'Mr' }, { value: 'Mrs' }, { value: 'Ms' }], value:'Mr' }, {label: 'Firstname', name: 'firstname', required: true, value:'Jacques' }, {label: 'Lastname', name: 'lastname', value:'Dupont' } ], buttons: [ {type: 'submit', value: 'Submit'}, {type: 'submit-link', value: 'Submit'}, { type: 'submit-link', value: 'Confirm and submit', onClick: { fn: confirmation.handler, // function called on click scope : confirmation // will become 'this' inside fn, when fn is called } }, { type: 'link', value: 'Reset form', onClick: function() {form7.clear();} // when scope doesn't matter, simpler syntax to attach a click handler } ], parentEl: 'container7' });

You can use 3 types of inputEx form buttons :

- submit : a (<input type="submit" />)-tag is created. A handler is automatically added on 'click' to submit the form only if it validates (no invalid fields, or no empty required fields).
- submit-link : same as 'submit' type, but with a different markup (<a><span>Submit</span></a>) to render as 'link'. The same handler as with 'submit' type is added on link.
- link : same markup as 'submit-link' but with no handler to submit the form. You must add your own 'onClick' function to trigger a specific action. The default link behavior is disabled, so you don't have to do it yourself in the onClick handler.

"link" and "submit-link" buttons are also useful because :

- they allow to differenciate strong actions (like a "submit"), and weak actions (like a form "reset")
- they are easier to style (see : styling buttons example)

## Destroy a form

Remove DOM nodes, remove event listeners, free memory...

var form8 = new inputEx.Form( { fields: [ {type: 'select', label: 'Title', name: 'title', choices: [{ value: 'Mr' }, { value: 'Mrs' }, { value: 'Ms' }], value:'Mr' }, {label: 'Firstname', name: 'firstname', required: true, value:'Jacques' }, {label: 'Lastname', name: 'lastname', value:'Dupont' } ], buttons: [ {type: 'submit', value: 'Submit'} ], parentEl: 'container8' }); var container = inputEx.cn('div',{id:'destroyButtonContainer'}); YAHOO.util.Dom.get('container8').appendChild(container); var destroyButton = new inputEx.widget.Button({ parentEl: 'destroyButtonContainer', id: 'destroyButton', type: 'submit', value: 'Destroy the form', onClick: function() { alert('clicked : form will be destroyed'); form8.destroy(); // remove nodes from DOM, remove event listeners delete form8; // free memory (no references to removed DOM nodes) } }); container.appendChild(inputEx.cn('div',null,{clear:'both'}));

## Turn off / on browser autocompletion

Activate/deactivate browser autocompletion by field, by form, or for all inputEx fields in the page.

// autocompletion is 'on' new inputEx.Form( { legend: "Form with autocompletion", fields: [ {label: 'Lastname', name: 'lastname', description:'autocomplete option set to true by default' }, // except on this field {type:'email', label: 'Email', name: 'email', autocomplete:false, description:"autocomplete option set to false on this field"} ], buttons: [{type: 'submit', value: 'Change'}], parentEl: 'container9' }); // autocompletion is 'off' on the whole form new inputEx.Form( { legend: "Form without autocompletion", autocomplete: false, fields: [ {label: 'Lastname', name: 'lastname' }, {type:'email', label: 'Email', name: 'email'} ], buttons: [{type: 'submit', value: 'Change'}], parentEl: 'container9' }); // to turn off the browser autocompletion by default in all // inputEx fields of the page, set the following value after // inputEx source inclusion : // // inputEx.browserAutocomplete = false; //