inputEx - Form Usage

Basic Form creation

Use the following code to create a basic inputEx Form.

new YAHOO.inputEx.Form( { fields: [ {type: 'select', inputParams: {label: 'Title', name: 'title', selectValues: ['Mr','Mrs','Mme'] } }, {inputParams: {label: 'Firstname', name: 'firstname', required: true, value:'Jacques' } }, {inputParams: {label: 'Lastname', name: 'lastname', value:'Dupont' } }, {type:'email', inputParams: {label: 'Email', name: 'email'}}, {type:'url', inputParams: {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 YAHOO.inputEx.Form( { fields: [ {type:'group',inputParams:{legend:'group 1',name:'group1',fields:[ {type: 'select', inputParams: {label: 'Title', name: 'title', selectValues: ['Mr','Mrs','Mme'] } }, {inputParams: {label: 'Firstname', name: 'firstname', required: true, value:'Jacques' } }, {inputParams: {label: 'Lastname', name: 'lastname', value:'Dupont' } } ]}}, { type:'group',inputParams:{legend:'group 2',name:'group2',fields:[ {type:'email', inputParams: {label: 'Email', name: 'email'}}, {type:'url', inputParams: {label: 'Website',name:'website'}} ]}} ], buttons: [{type: 'submit', value: 'Change'}], parentEl: 'container2' });

Send with ajax

How to send the form data using Ajax

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