JSFiddle - React, Tailwind, and code Playground

Tie a Y.Model instance to a form module ... have keydown events, update the model and therefore, fire change events on the model that can easily be listened for,

by dfederighi

HTML

<a href="" id="testLink">submit</a><br>
<a href="" id="testLink2">dump model</a>

JavaScript

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2011.11.10-16-24'
}).use("gallery-form", "model", function (Y) {
    // Create a Field Object manually
    var myField = new Y.CheckboxField({
        name : "myCheckbox",
        value : "check",
        label : "Test Checkbox"
    });
 
    var f = new Y.Form({
        boundingBox: '#form',
        action : 'test.php',
        method : 'post',
        children : [
            myField,
            // Have the Form class create your fields itself
            {name : "testText", required : true, label : "Test Label"},
            {name : 'testHiddenField', type : "HiddenField"},
            {name : 'testSelectField', type : 'SelectField', choices : [{label : 'Foo', value : 'foo'}, {label : 'Bar', value : 'bar'}], label : 'testSelect'},
            {name : 'submitBtn', type : 'SubmitButton', value : 'Submit'},
            {name : 'resetBtn', type : 'ResetButton', value : 'Reset'}
        ]
    });
    
    // you'll fetch these attributes from the DB as an array converted to JSON ...
    f.model = new Y.Model({
        'testText':'',
        'testSelectField':''
    });
    
    Y.one("#testLink").on('click', function(e) {
       e.preventDefault();
       f.model.setAttrs({
            testText: 'dale federighi',
            testSelectField: 'foo'
        });
    });
    
    Y.one("#testLink2").on('click', function(e) {
        e.preventDefault();
        
        // modified will be true, even if changed is empty, because it hasn't been 'saved'
        console.log('f.model.isModified():', f.model.isModified());
        console.log('f.model.changed:', f.model.changed);
       
    });
    
    f.subscribe('success', function (args) {
        alert ('Form submission successful');
        
    });
    f.subscribe('failure', function (args) {
        alert('Form submission failed');
    });
    
    
    f.render();
    
    f.getField('testText')._fieldNode.on('keydown', function(e) {
       ...