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;
//