Fork me on GitHub

Example: Basic form field creation

How to create a form field.

Basic Form creation

Use the following code to create a basic inputEx Form.

Multi-group Form

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

Send in json with ajax

How to send the form data using Ajax

Send with ajax using url encoded parameters

How to send the form data using Ajax

Send with ajax using url encoded parameters wrapped in an object

Use wrapObject

Setting and getting form value

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

Different button types

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

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...

Turn off / on browser autocompletion

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

HTML

<div id="field-container"></div>

JavaScript

Implementation

YUI().use('inputex-form', 'inputex-email', 'inputex-url', 'inputex-select',  function(Y) {

    // Example 1

    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'
    });
    
    
    
    // Example 2

    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'
     });
     
     
     // Example 3
     

     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
        }
     });
     
     
     // Example 4

     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
        }
     });
     
     
     // Example 5

     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
        }
     });
     
     
     // Example 6

     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'
     });
     
     
     // Example 7
     

         
     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'
     });
     
     
     // Example 8

     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 = Y.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(Y.inputEx.cn('div',null,{clear:'both'}));
         
         
         
     // Example 9
     

     // autocompletion is 'on' by default
     new Y.inputEx.Form({
        legend: "Form with autocompletion",
        fields: [
           { label: 'Lastname', name: 'lastname', description: 'autocomplete option set to "default" by default = inherit from the attribute of the form (which is "on" here)' },
           // except on this field
           { type:'email', label: 'Email', name: 'email', autocomplete: 'off', description: 'autocomplete option set to "off" 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: 'off',
        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 = 'off';
     //
     
});