Pressing “Return” in a HTML-Form with multiple Submit-Buttons
Question
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.
6 answers
solution1
19 2010-01-20 15:26:58
将第一个按钮更改为<input type="button" /> 。
solution2
8 ACCPTED 2010-01-20 15:30:41
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 1 , 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: noneshould prevent a button from being an active part of the form (included in the result set, and eligible for default-button-ness);visibility: hiddenshould not. However both of these cases are got wrong by some browsers. The normal way to have an invisible first submit button is toposition: 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.
solution3
3 2010-01-20 15:29:58
What does the first button do? If you just need a button to attached a js listener to, which doesn't submit, use
<button type="button" id="myButton">Text Here</button>
solution4
0 2010-01-20 15:29:58
Is it an option to use absolute positioning on your less important submit button and have it appear after your primary submit button in the HTML? So, you can have:
<form>
<p>
Stuff
<input type="submit" value="This is my main submit button" />
<input type="submit" value="This is my secondary submit button" style="position: absolute; left: 0px; top: 0px; />
</p>
</form>
Your secondary submit button will appear first on the screen, but the primary submit button should take precedence when enter is pressed.
solution5
0 2014-06-23 03:12:56
<script>
$(function(){
$('#button-new-captcha').click(function(){
$('input[name=button-submit]').prop('name', 'button-new-captcha').click();
});
});
</script>
<div class="buttons">
<a class="btn btn-cancel" href="/login">Cancel</a>
<a class="btn btn-default" href="#" id="button-new-captcha">New Image</a>
<input type="submit" name="button-submit" class="btn btn-default" value="Send Username">
</div>
solution6
0 2015-01-06 17:40:26
Another workaround is to create an extra non-functional submit input at the very beginning of the form and hide it using opacity:
<input type="submit" value="" onclick="return false;" style="opacity: 0">
The button will still be rendered on the page, albeit transparent, so you will have to provide some real estate for it. Alternatively you could play with pushing it behind another element using z-index or rendering it outside the page as others have suggested here before.
What you gain with onclick="return false;" is that the form will not be submitted when hitting "Enter" anymore; no page reload, either.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.