Question

160

Pressing Return in a HTML-Form with multiple Submit-Buttons

rated 0 times [ 164] [ 4] / answers: 1 / hits: 15171 / 15 Years ago, wed, january 20, 2010, 12:00:00

Let's imagine a HTML-form with with two submit buttons. one of them is positioned in the upper half of the form and does something less important. the other button is the actual submit button, which saves the entered data. this button is positioned at the end of the form. the two buttons will trigger different action-urls.

experienced users like to submit their forms by pressing enter or return instead of clicking on the according button.

unfortunately, the browser will look for the first submit-button of the current form and use this to execute the form-submit. since in my form the second button is the actual submit-button, i need to tell the browser to use this particular button (or the action-url that is associated with it).

i don't link javascript listeners, which are looking for key pressed or something like that. so i'm looking for a better approach to this problem. however, javascript or jquery solutions (without keypressed-listerner) are welcome.

thank you very much for your help in advance.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lamontm

Add To Favorites

Follow

Total Points: 482

Total Questions: 99

Total Answers: 91

Location: Burkina Faso

Member since Thu, Dec 15, 2022

1 Year ago

answered 15 Years ago dustin · Accepted Answer

You could, theoretically at least, have three submit buttons in your form.

Button two is the existing 'less-important' button (from halfway down the form), button three is the existing 'actual-submit' button from your existing form.

Button one should be hidden (using CSS display:none or visibility: hidden) and should perform exactly the same function as your current 'actual-submit.' I think it'll still be the first button to be found by the browser, regardless of its visibility.

<form method="post" method="whatever.php" enctype="form/multipart">



<fieldset id="first">



<label>...<input />

<label>...<input />

<label>...<input />



<input type="submit" value="submit" style="visibility: hidden;" <!-- or "display: none" --> />

<input class="less_important" type="submit" value="submit" />



</fieldset>



<fieldset id="second">



<label>...<input />

<label>...<input />

<label>...<input />



<input type="submit" value="submit" class="actual_submit" />



</fieldset>



</form>

Edited in response to comments:

I thought hidden buttons were also disabled by default? [md5sum]

A valid point, but I made the mistake of testing only in Firefox (3.5.7, Ubuntu 9.10) before posting, in which the technique worked¹, for both. The complete xhtml file is pasted (below) that forms the basis of my testing subsequently to these comments.

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">



<head>

    <title>3button form</title>

    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />

        <script type="text/javascript" src="js/jquery.js"></script>





        <script type="text/javascript">



$(document).ready(



    function() {

        

        $('input[type="submit"]').click(

            function(e){

                alert("button " + $(this).attr("name"));

            }

        );



    }

);

        </script>





</head>



<body>



<form method="post" method="whatever.php" enctype="form/multipart">



<fieldset id="first">



<label>...<input />

<label>...<input />

<label>...<input />



<input name="one" type="submit" value="submit" style="display:none;" /><!-- or "display: none" --> 

<input name="two" class="less_important" type="submit" value="submit" />



</fieldset>



<fieldset id="second">



<label>...<input />

<label>...<input />

<label>...<input />



<input name="three" type="submit" value="submit" class="actual_submit" />



</fieldset>



</form>





</body>



</html>

display: none should prevent a button from being an active part of the form (included in the result set, and eligible for default-button-ness); visibility: hidden should not. However both of these cases are got wrong by some browsers. The normal way to have an invisible first submit button is to position: absolute; it and move it way off the page (eg. with left: -4000px). This is ugly but reliable. It's also a good idea to change its tabindex so it doesn't interfere in the expected form tabbing order.

There are, at least, two points I have to raise to this comment. In order:

The normal way... I was unaware that there was a normal way, and presented this option as a possibility to achieve an aim, in the full knowledge that there were/are almost certainly any number of better ways, particularly given that I don't see a good reason for multiple submit buttons on the same form.

Given the latter sentence of the above point, I'd like to make it clear that I don't advocate doing this. At all. It feels like an ugly, and non-semantic, hack to have more than one submit button, with -in the OP's instance- one button apparently not being a submit button.

The notion of `position: absolute; left: -4000px;` had occurred to me, but it seemed to effect much the same as `visibility: hidden;`, and I have an innate dislike of `position: absolute;` for whatever reason...so I went with the option that was less objectionable to me at the time of writing... =)

I appreciate your comment about the tabindex, though, that was something that I never gave any thought to, at all.

I'm sorry if I sound somewhat snippy, it's late, I'm tired...yadda-yadda; I've been testing in various browsers since my return home and it seems that Firefox 3.5+ gives the same behaviour -reporting 'button one' on both Windows XP and Ubuntu 9.10, all Webkit browsers (Midori, Epiphany, Safari and Chrome) fail and report 'button two.'

So it's definitely a fail-worthy idea to display: none; the submit button. Whereas the visibility:hidden at least works.

By which I mean that hitting 'enter' triggered the form-submit event, or the click event of the first submit button of the form, regardless of whether that first submit was `display: none;` or `visibility: hidden`.

Please be aware that my jQuery skills are limited, so the tests employed (I ran only at a time to try and prevent conflicts occurring in execution, commenting out the one I didn't run at that time, both are presented -one, clearly, commented out) may well be insufficient and non-representative.