inputEx - Form Usage

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

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

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.

// autocompletion is 'on'
         new 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 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;
         //