Tapestry Training -- From The Source

Let me help you get your team up to speed in Tapestry ... fast. Visit howardlewisship.com for details on training, mentoring and support!

Friday, June 17, 2005

HTML form trick

Sometimes you come up with something so simple and so useful you have to share.

So ... I'm working on a Wizard and I have four buttons across the bottom of the form: "< Previous", "Next >", "Finish >>" and "Cancel".

But I noticed that when I hit the return key inside on of the fields of the form, it kept acting like "< Previous" was clicked. That's not what I wanted at all.

The browser basically worked forward in the tab order from the text field I clicked until it found as submit button within the form ... which happened to be "< Previous".

My solution?

<input type="submit" style="display: none"/>

That empty submit gets "found" (desipite being invisible) before the "< Previous" button, and the form submits normally.

4 comments:

sicklittlemonkey said...

Wouter Cleuren also posted this to the user list last week. Why are all the bright minds solving this problem now, instead of months ago when people were asking for solutions? ;-)

I've been using gstamp's ButtonSubmit combined with an invisible ImageSubmit, but will change to the invisible Submit if it covers all cases.

David Easley said...

This technique defeats IE's accessibility feature of highlighting the default button with a bold border.

IE draws a bold border around a button to signify that it is the one that will be used if the user hits Enter. If some button other than the default has input focus, then it temporarily grabs the bold border. As soon as some non-button input control has the focus, the bold border goes back to the default button. The bold border is essential for mouse averse users, so they know what's going to happen if they hit enter.

Martin said...

Sorry this doesn't work for me (IE 6.0) When I specify the submit button with the style="display: none" it seems IE ignores this submit button. When I specify the style="width:0px" it works (but the following submit button is a little bit shifted)

In my solution I use JavaScript to solve the problem.

Does anybody know a way that IE doesn't draw a border for the default submit button?? (like Firefox)

ian said...

http://www.thescripts.com/forum/thread622606.html

Tells you how to do this, basically

protected void Page_Load(object sender, EventArgs e)
{
Button1.UseSubmitBehavior = false;
Button2.UseSubmitBehavior = true;

Page.Form.DefaultFocus = Button2.ClientID;
}