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:
findForm : function(f) {
while(f.tagName != "FORM") {
f = f.parentNode;
}
return f;
}
The reset event:
btn.addEvent(document.getElementById('reset_btn'),'click',function() {
var form = btn.findForm(this);
form.reset();
});
The submit event:
btn.addEvent(document.getElementById('submit_btn'),'click',function() {
var form = btn.findForm(this);
form.submit();
});