Zach’s ugly mug (his face) Zach Leatherman

Fundamental Problem with YUI Button

March 22, 2007

Warning

This article is old and may contain information that is outdated, irrelevant, or—dare I say it—no longer accurate. 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.


Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://cloudcannon.com/CloudCannon. He is the creator and maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 79 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

1 Comment
  1. Eric Miraglia Disqus

    23 Mar 2007
    You're right -- this is a bug. We're working on it and plan to have a fix in an upcoming patch early in April. Regards, Eric (YUI Team)
Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)