CODEWITHSUNDEEP
javascriptformsdojo
vogomatix
vogomatix

Reputation: 5041

Form change event

I am trying to have a button change CSS class from 'active' to 'inactive' based on whether the form is valid or not

So I have this declarative bit...

<form data-dojo-type="dijit/form/Form" id="myForm" action="http://somthing">
<script type="dojo/on" data-dojo-event="change" data-dojo-args="e">
// for some reason change returns dom object not dijit object....
var self = dijit.byId( this.id);
require( [ 'dojo/dom-class' ], function (domClass) {
    var tmp, on = 'active' , off = 'inactive';
    if (self.get('state')) {
        // invalid
        tmp = off; off=on; on=tmp;
    }
domClass.replace( 'complete', on, off);
});
</script>
..rest of form and submit button with id='complete' is here.

This script is intended to changes the class of a submit button depending on whether the form isvalid or not. My first question is why is this routine getting the DOM object as this instead of the Dijit object, as the examples seem to imply I should be getting the latter. My second question is whether I should be doing this in a better way?

Upvotes: 0

Views: 410

Answers (1)

Royston Shufflebotham
Royston Shufflebotham

Reputation: 970

Check the target property of the event you received: you're most likely receiving it off the form, bubbled (via HTML event bubbling) up from an actual control in your form. It's a native DOM event rather than a higher-level Dojo event, hence this being the DOM node.

It's sometimes easier to use a plain old piece of JavaScript code instead of a dojo/on script, and use dojo/on to subscribe manually. There's no magic, and you can see exactly what you're subscribing to then:

require(['dojo/on'], function (on) {
  var myForm = dijit.byId("myForm");
  on(form, "change", function(evt) {
    // Handle the event here, referring to myForm rather than trying to
    // work with 'this'.
  });
});

More examples, including checking for validity, are at: http://dojotoolkit.org/reference-guide/1.9/dijit/form/Form.html#using-native-form-elements

Upvotes: 1

Related Questions