Scalable Buttons Update

This is an update to the script at the popular article Scalable CSS Buttons Using PNG and Background Colors. Several people have claimed that the form in the demo doesn’t submit and it’s a “bug” so here is an update to the JavaScript so it now includes a findForm() function that grabs the form in which the button is situated in, and then a couple of lines that submits and resets the form in the init() function.

The script grabs the id’s submit_btn and reset_btn and adds an onclick event to each id that submits/resets it’s parent form.

The findForm() function:

1. findForm : function(f) {
2. while(f.tagName != "FORM") {
3. f = f.parentNode;
4. }
5. return f;
6. }

The reset event:

1. btn.addEvent(document.getElementById('reset_btn'),'click',function() {
2. var form = btn.findForm(this);
3. form.reset();
4. });

The submit event:

1. btn.addEvent(document.getElementById('submit_btn'),'click',function() {
2. var form = btn.findForm(this);
3. form.submit();
4. });