RSS Feed
06
Jan.
2010

Multiple submit buttons but no JavaScript

At work I faced a rather tricky problem: on a form with a row of multiple submit buttons (they call it a button row) the rightmost one has to be the default button. So if, for example, you have the buttons a | b | c then button c must respond to enter. With the help of jQuery this would have been easy. Unfortunately, though, the customer wants the form to work properly without any use of JavaScript.

My first step was to reverse the order of the submit buttons in the markup. Because even though it is not explicitly defined in the HTML spec every browser uses the first submit button that appears in the markup as the default button. So my markup looked something like this:

<input type="submit" value="c" ...
<input type="submit" value="b" ...
<input type="submit" value="a" ...

So if you simply hit the enter key the browser will use submit button C.

Now, of course I do not want to show the buttons to the user in reverse order. Therefore I have to arrange them in right order with a bit of CSS. The most obvious solution here is the use of float: right. But there are cases when floats can break your design. In my case, for example, I had to center the submit buttons horizontally. Assume the following markup:

<div class="outer">
    <div class="inner">
        <input type="submit" ...
        <input type="submit" ...
        <input type="submit" ...
    </div>
</div>

You might think, well, why not just simply set text-align to center on div.outer? Well, this can work as long as you know the exact width of the inner div. Or in other words: the width of the inner div has to be the sum of the width of each submit button.

But what if both the width and the amount of submit buttons can vary? In this case there's no way to know the width of the inner div beforehand. Actually I found a solution with display: inline-block. However, this worked on FF/Safari only. And not on IE, as usual ;-)

Fortunately I stumbled across another CSS property: direction. And this one did the trick:

<div class="outer">
    <input type="submit" value="c" ...
    <input type="submit" value="b" ...
    <input type="submit" value="a" ...
</div>

div.outer {
    text-align: center;
    direction: rtl;
}

Voila. A centered row of buttons with the rightmost submit button C as the default button.

Your Comment

Don't be shy. Please feel free to add your comment.

This site uses a CAPTCHA system. To help protect against unwanted SPAM please type the letters as seen on the black image.