Use the following code to create a basic inputEx Form.
new Y.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' });
Use the following code to create a Form with multiple Groups (fieldsets).
new Y.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' });
How to send the form data using Ajax
new Y.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 } });
How to send the form data using Ajax
new Y.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 } });
Use wrapObject
new Y.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 } });
Use the following code to set or get the value from javascript
var form6 = new Y.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 = Y.JSON.stringify(valueAsJsObject); alert(valueAsJsonString); return false; // stop clickEvent, to prevent form submitting } } ], parentEl: 'container6' });
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 Y.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 :
"link" and "submit-link" buttons are also useful because :
Remove DOM nodes, remove event listeners, free memory...
var form8 = new Y.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'}); Y.one('#container8').appendChild(container); var destroyButton = new Y.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'}));
Activate/deactivate browser autocompletion by field, by form, or for all inputEx fields in the page.
// autocompletion is 'on' new Y.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 Y.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; //