Fork me on GitHub

Example: Basic hidden field creation

How to create a hidden field.

Basic HiddenField creation

The hidden field is by definition 'invisible', so there isn't a lot to see. However, it can be useful to keep an id :

Note that <hiddenFieldInstance>.getValue() returns the value as stored, without type casting (we store an integer -> we get an integer).

However, when the form is submitted via a 'submit' button, the hidden value is sent as 'string' whatever its datatype was... (we store 12, we submit "12").

This is a limitation of the classic HTML form submit. To circumvent the problem, use an ajax submit of the form (which relies on getValue) : see form examples.

HTML

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

JavaScript

Implementation

YUI().use('inputex-hidden', 'inputex-string', 'inputex-group', 'json', function(Y) {

    var exampleDiv = Y.one('#container1');
    
    var group = new Y.inputEx.Group({
        fields: [ 
            { type: 'hidden', name: 'id', value: 12 },
            { type: 'hidden', name: 'lastname', value: 'Scott' },
            { type: 'string', name: 'firstname', label: 'Firstname', required: true, value:'James'}
        ], 
        parentEl: exampleDiv
    });
    
    var button = Y.inputEx.cn('button',null,null, 'Get Value'); 
    
    exampleDiv.appendChild(button); 
    
    Y.one(button).on('click', function(){ alert(Y.JSON.stringify(group.getValue()) ); });
    
});