inputEx - Form Usage

Basic Form creation

Use the following code to create a basic inputEx Form.

1new inputEx.Form( {  
2   fields: [  
3      {type: 'select', label: 'Title', name: 'title', choices: [{ value: 'Mr' }, { value: 'Mrs' }, { value: 'Ms' }] }, 
4      {label: 'Firstname', name: 'firstname', required: true, value:'Jacques' }, 
5      {label: 'Lastname', name: 'lastname', value:'Dupont' }, 
6      {type:'email', label: 'Email', name: 'email'}, 
7      {type:'url', label: 'Website',name:'website'} 
8   ],  
9   buttons: [{type: 'submit', value: 'Change'}], 
10   parentEl: 'container1' 
11}); 
view plain | print | ?

Multi-group Form

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

group 1
group 2
1new inputEx.Form( { 
2     fields: [ 
3         {  
4            type:'group', 
5            legend:'group 1', 
6            name:'group1', 
7            fields:[ 
8              {type: 'select', label: 'Title', name: 'title', choices: [{ value: 'Mr' }, { value: 'Mrs' }, { value: 'Ms' }] }, 
9              {label: 'Firstname', name: 'firstname', required: true, value:'Jacques' }, 
10              {label: 'Lastname', name: 'lastname', value:'Dupont' } 
11            ] 
12         }, 
13         {  
14            type:'group', 
15            legend:'group 2', 
16            name:'group2', 
17            fields:[ 
18              {type:'email', label: 'Email', name: 'email'}, 
19              {type:'url', label: 'Website',name:'website'} 
20            ] 
21         } 
22     ], 
23     buttons: [{type: 'submit', value: 'Change'}], 
24     parentEl: 'container2' 
25 }); 
view plain | print | ?

Send in json with ajax

How to send the form data using Ajax

1new inputEx.Form( { 
2   fields: [  
3      { type: 'select', label: 'Title', name: 'title', choices: [{ value: 'Mr' }, { value: 'Mrs' }, { value: 'Ms' }] }, 
4      { label: 'Firstname', name: 'firstname', required: true, value:'Jacques' }, 
5      { label: 'Lastname', name: 'lastname', value:'Dupont' } 
6   ],  
7   buttons: [{type: 'submit', value: 'Change'}],     
8   parentEl: 'container3', 
9   ajax: { 
10      method: 'POST', 
11      uri: 'default.php', 
12      callback: { 
13         success: function(o) { alert("success", o); }, 
14         failure: function(o) { alert("failure", o); } 
15      }, 
16      showMask:true 
17   } 
18}); 
view plain | print | ?

Send with ajax using url encoded parameters

How to send the form data using Ajax

1new inputEx.Form( { 
2   fields: [  
3      { type: 'select', label: 'Title', name: 'title', choices: [{ value: 'Mr' }, { value: 'Mrs' }, { value: 'Ms' }] }, 
4      { label: 'Firstname', name: 'firstname', required: true, value:'Jacques' }, 
5      { label: 'Lastname', name: 'lastname', value:'Dupont' } 
6   ],  
7   buttons: [{type: 'submit', value: 'Change'}],     
8   parentEl: 'container4', 
9   ajax: { 
10      method: 'POST', 
11      uri: 'default.php', 
12      contentType: "application/x-www-form-urlencoded", 
13      callback: { 
14         success: function(o) { alert("success", o); }, 
15         failure: function(o) { alert("failure", o); } 
16      }, 
17      showMask:true 
18   } 
19}); 
view plain | print | ?

Send with ajax using url encoded parameters wrapped in an object

Use wrapObject

1new inputEx.Form( { 
2   fields: [  
3      { type: 'select', label: 'Title', name: 'title', choices: [{ value: 'Mr' }, { value: 'Mrs' }, { value: 'Ms' }] }, 
4      { label: 'Firstname', name: 'firstname', required: true, value:'Jacques' }, 
5      { label: 'Lastname', name: 'lastname', value:'Dupont' } 
6   ],  
7   buttons: [{type: 'submit', value: 'Change'}],     
8   parentEl: 'container5', 
9   ajax: { 
10      method: 'POST', 
11      uri: 'default.php', 
12      contentType: "application/x-www-form-urlencoded", 
13      wrapObject: "person", 
14      callback: { 
15         success: function(o) { alert("success", o); }, 
16         failure: function(o) { alert("failure", o); } 
17      }, 
18      showMask:true 
19   } 
20}); 
view plain | print | ?

Setting and getting form value

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

Emails
1var form6 = new inputEx.Form( {  
2   fields: [  
3      {type: 'select', label: 'Title', name: 'title', choices: [{ value: 'Mr' }, { value: 'Mrs' }, { value: 'Ms' }], value:'Mr' }, 
4      {label: 'Firstname', name: 'firstname', required: true, value:'Jacques' }, 
5      {label: 'Lastname', name: 'lastname', value:'Dupont' }, 
6      { 
7         type: 'group', 
8         legend: 'Emails', 
9         name: 'emails', 
10         fields: [ 
11            {type:'email', label: 'Email 1', name:'first'}, 
12            {type:'email', label: 'Email 2', name:'second'} 
13         ] 
14      } 
15   ], 
16   buttons: [ 
17      { 
18         type: 'submit', 
19         value: 'Set form value', 
20          
21         onClick: function(e) { // e === clickEvent (inputEx.widget.Button custom event) 
22             
23            // valueObject : object to be passed to setValue function 
24            //               its structure is { field_name : field_value, ... } 
25             
26            var valueObject = { 
27               title:"Mrs", 
28               firstname:"Candy", 
29               lastname:"Jones", 
30               // note the nested object when setting value of a form with a 'group' field : 
31               emails:{ 
32                  first:'first@email.com', 
33                  second:'second@email.com' 
34               } 
35            }; 
36             
37            form6.setValue(valueObject); 
38             
39            return false; // stop clickEvent, to prevent form submitting 
40             
41         } 
42      }, 
43      { 
44         type: 'submit', 
45         value: 'Get form value', 
46          
47         onClick:function(e) { // e === clickEvent (inputEx.widget.Button custom event) 
48             
49            var valueAsJsObject = form6.getValue(); 
50            var valueAsJsonString = YAHOO.lang.JSON.stringify(valueAsJsObject); 
51             
52            alert(valueAsJsonString); 
53             
54            return false; // stop clickEvent, to prevent form submitting 
55         } 
56      } 
57   ], 
58   parentEl: 'container6' 
59}); 
view plain | print | ?

Different button types

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

SubmitConfirm and submitReset form
1var confirmation = { 
2    
3   message : "Are you sure you want to submit ?", 
4    
5   handler : function() { 
6      if (!confirm(this.message)) { 
7         return false;  // return false to prevent form submit 
8      } 
9   } 
10    
11}; 
12 
13var form7 = new inputEx.Form( {  
14   fields: [  
15      {type: 'select', label: 'Title', name: 'title', choices: [{ value: 'Mr' }, { value: 'Mrs' }, { value: 'Ms' }], value:'Mr' }, 
16      {label: 'Firstname', name: 'firstname', required: true, value:'Jacques' }, 
17      {label: 'Lastname', name: 'lastname', value:'Dupont' } 
18   ],  
19   buttons: [ 
20      {type: 'submit', value: 'Submit'}, 
21      {type: 'submit-link', value: 'Submit'}, 
22      { 
23         type: 'submit-link', 
24         value: 'Confirm and submit', 
25         onClick: { 
26            fn: confirmation.handler, // function called on click 
27            scope : confirmation // will become 'this' inside fn, when fn is called 
28         } 
29      }, 
30      { 
31         type: 'link', 
32         value: 'Reset form', 
33         onClick: function() {form7.clear();} // when scope doesn't matter, simpler syntax to attach a click handler 
34      } 
35   ], 
36   parentEl: 'container7' 
37}); 
view plain | print | ?

You can use 3 types of inputEx form buttons :


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

Destroy a form

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

1var form8 = new inputEx.Form( {  
2   fields: [  
3      {type: 'select', label: 'Title', name: 'title', choices: [{ value: 'Mr' }, { value: 'Mrs' }, { value: 'Ms' }], value:'Mr' }, 
4      {label: 'Firstname', name: 'firstname', required: true, value:'Jacques' }, 
5      {label: 'Lastname', name: 'lastname', value:'Dupont' } 
6   ],  
7   buttons: [ 
8      {type: 'submit', value: 'Submit'} 
9   ], 
10   parentEl: 'container8' 
11}); 
12 
13var container = inputEx.cn('div',{id:'destroyButtonContainer'}); 
14YAHOO.util.Dom.get('container8').appendChild(container); 
15 
16var destroyButton = new inputEx.widget.Button({ 
17   parentEl: 'destroyButtonContainer', 
18   id: 'destroyButton', 
19   type: 'submit', 
20   value: 'Destroy the form', 
21   onClick: function() { 
22      alert('clicked : form will be destroyed'); 
23      form8.destroy(); // remove nodes from DOM, remove event listeners 
24      delete form8;  // free memory (no references to removed DOM nodes) 
25   } 
26}); 
27 
28container.appendChild(inputEx.cn('div',null,{clear:'both'})); 
view plain | print | ?

Turn off / on browser autocompletion

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

Form with autocompletion
autocomplete option set to true by default
autocomplete option set to false on this field
Form without autocompletion
1// autocompletion is 'on' 
2new inputEx.Form( {  
3   legend: "Form with autocompletion", 
4   fields: [  
5      {label: 'Lastname', name: 'lastname', description:'autocomplete option set to true by default' }, 
6      // except on this field 
7      {type:'email', label: 'Email', name: 'email', autocomplete:false, description:"autocomplete option set to false on this field"} 
8   ],  
9   buttons: [{type: 'submit', value: 'Change'}], 
10   parentEl: 'container9' 
11}); 
12 
13// autocompletion is 'off' on the whole form 
14new inputEx.Form( {  
15   legend: "Form without autocompletion", 
16   autocomplete: false, 
17   fields: [  
18      {label: 'Lastname', name: 'lastname' }, 
19      {type:'email', label: 'Email', name: 'email'} 
20   ],  
21   buttons: [{type: 'submit', value: 'Change'}], 
22   parentEl: 'container9' 
23}); 
24 
25// to turn off the browser autocompletion by default in all 
26// inputEx fields of the page, set the following value after 
27// inputEx source inclusion : 
28// 
29//   inputEx.browserAutocomplete = false; 
30// 
view plain | print | ?