zachleat’s Ugly Mug

Zach Leatherman

Fundamental Problem with YUI Button

22 March 2007Read this in about 1 minute.

Warning

This article is fairly old and probably contains information that is no longer relevant. Read with care!

Buttons! Let’s make them obvious and good looking. Let’s make them have inline images and cool hover colors. Let’s make them three dimensional. Especially so, let’s make them from markup so that we don’t take functionality away from technology disabled users.

Ruh roh Shaggy! The YUI Button component is misbehaving. It is taking away the submit event fired when the button is clicked and firing the submit() function programmatically.

So, how do you fire the listener functions that are waiting for the submit event to fire, while at the same time using the sleek buttons provided by YUI?

Try this plug and play function:

YAHOO.widget.Button.prototype._submitForm = function() {
    var oForm = this.getForm();
    if(oForm) {
        YAHOO.widget.Button.addHiddenFieldsToForm(oForm);
        this.createHiddenField();
    var listeners = YAHOO.util.Event.getListeners( oForm, 'submit' );
    var submitForm = true;
    for( var j = 0; j < listeners.length; j++ )
    {
      if( listeners[ j ].fn.apply( listeners[ j ].adjust ) == false ) submitForm = false;
    }
        if( submitForm ) oForm.submit();
    }
};

(Make sure you include this after you’ve loaded the YUI Button javascript file.) There are a few caveats to this approach.

First, you’ll have to remove any references to the event object inside your listener function (most of the examples use the variable e). For example:

YAHOO.util.Event.addListener( myForm, 'submit', function( e ) {} );

Inside my submit listener functions, I just check to make sure e is not null prior to using it.

Second, if you wish to cancel the submit, you’ll have to return false inside of your submit listener function.

A sleeker approach would be to revert back to having the button fire the ‘submit’ event. But I’ll leave that as an exercise to the original developer, Mr. Todd Kloots (props).

Update: After a little more code searching, it would seem like the submit event is never being canceled by the YUI Button javascript. However, when you comment out the line that that fires the submit programmatically (oForm.submit();), the form still isn’t submitted. I’ll have to research a bit more.

Say hello on and GitHub.

Let my Feed sit idle in your RSS Reader.

Zach Leatherman is a Professional Front End Engineer. He loves building for the web and has been writing here since 2007.

He enjoys spending time with his beautiful wife Traci and their two Great Danes, Roxie and Ella. They also have a cat, a rabbit, goldfish, and usually one or more tarantulas. Read more »