按下“返回”在一个带有多个提交按钮的HTML表单中 [英] Pressing "Return" in a HTML-Form with multiple Submit-Buttons

问题描述

让我们想象一个带有两个提交按钮的HTML表单。其中一个位于表格的上半部分，并且做的不太重要。另一个按钮是实际的提交按钮，用于保存输入的数据。此按钮位于表单的末尾。这两个按钮将触发不同的动作网址。

有经验的用户喜欢通过按enter或return来提交表单，而不是点击相应按钮。 / p>

不幸的是，浏览器会查找当前表单的第一个提交按钮并使用它来执行表单提交。因为在我的表单中第二个按钮是实际的提交按钮，所以我需要告诉浏览器使用这个特定的按钮（或与之相关联的动作url）。

我不链接JavaScript侦听器，它们正在寻找按键或类似的东西。所以我正在寻找更好的方法来解决这个问题。然而，javascript或jquery解决方案（无keypress-listerner）是受欢迎的。

非常感谢您的帮助。

submit 按钮。

按钮二是现有的不太重要的按钮（从表格的一半开始），按钮三是现有表单中现有的实际提交按钮。

按钮一应该隐藏（使用CSS display：none 或 visibility：hidden ）并且应该执行与你当前的'实际提交'完全相同的功能。'我认为它仍然是第一个被浏览器发现的按钮，无论它的可见性如何。

 < form method =postmethod =whatever.phpenctype =form / multipart> 
 
< fieldset id =first> 
 
< label> ...< input /> 
< label> ...< input /> 
< label> ...< input /> 
 
< input type =submitvalue =submitstyle =visibility：hidden; <！ - 或display：none - > /> 
< input class =less_importanttype =submitvalue =submit/> 
 
< / fieldset> 
 
< fieldset id =second> 
 
< label> ...< input /> 
< label> ...< input /> 
< label> ...< input /> 
 
< input type =submitvalue =submitclass =actual_submit/> 
 
< / fieldset> 
 
< / form> 
  

---

编辑回应评论：

我以为隐藏按钮在默认情况下也被禁用了吗？ [md5sum]

一个有效的观点，但是在发布之前我犯了一个只在Firefox（3.5.7，Ubuntu 9.10）中测试的错误，其中技术工作 ¹ ，为两者。完整的xhtml文件被粘贴（在下面），它构成了我对这些注释进行测试的基础。

 <？xml version =1.0encoding =utf-8？> 
<！DOCTYPE html PUBLIC -  // W3C // DTD XHTML 1.0 Strict // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\"> 
 
  
< head> 
< title> 3button表单< / title> 
< link rel =stylesheettype =text / csshref =css / stylesheet.css/> 
< script type =text / javascriptsrc =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 =postmethod =whatever.phpenctype =form / multipart> 
 
< fieldset id =first> 
 
< label> ...< input /> 
< label> ...< input /> 
< label> ...< input /> 
 
< input name =onetype =submitvalue =submitstyle =display：none; /><！ - 或display：none - > 
< input name =twoclass =less_importanttype =submitvalue =submit/> 
 
< / fieldset> 
 
< fieldset id =second> 
 
< label> ...< input /> 
< label> ...< input /> 
< label> ...< input /> 
 
< input name =threetype =submitvalue =submitclass =actual_submit/> 
 
< / fieldset> 
 
< / form> 
 
 
< / body> 
 
< / html> 
  

显示：无应该防止按钮成为表单的活动部分（包含在结果集中，并且符合默认按钮）。 visibility：hidden 不应该。然而，这些情况都被一些浏览器弄错了。有一个不可见的第一个提交按钮的正常方法是 position：absolute; 它并将其从页面移开（例如，使用left：-4000px）。这很丑但可靠。改变它的tabindex也是一个好主意，所以它不会干预预期的表格标签顺序。

至少有两点我必须提出这个意见。按顺序：

1. 正常的方式......我不知道有一个正常的方法，并且提出这个选项是一种可能性为了实现目标，充分认识到几乎可以肯定有许多更好的方法，特别是鉴于我没有看到在同一表单上提供多个提交按钮的好理由。


2. 鉴于上述观点的后一句话，我想说清楚我不主张这样做。完全一样。它感觉像是一个丑陋的，非语义的，拥有多个提交按钮，在OP的实例中 - 显然有一个按钮不是提交按钮。


3. position：absolute的概念;左：-4000px;`发生在我身上，但它看起来和'visibility：hidden;'的效果差不多，而且我有天生的不喜欢'position：absolute;`不管出于何种原因......所以我去了在撰写本文时我不太反感的选项...... =）





感谢您对tabindex的评论，尽管，那是我从来没有想过的，根本就没有。





对不起，如果我听起来有些sn，，已经很晚了，我很累...... yadda，yadda;自从我回家以来，我一直在各种浏览器中进行测试，并且似乎Firefox 3.5+在Windows XP和Ubuntu 9.10上都提供了相同的行为 - 报告按钮一，所有Webkit浏览器（Midori，Epiphany，Safari和Chrome）均失败并报告'button two'。





所以对于 display：none; submit按钮。而 visibility：hidden 至少可以工作。



---







1. 我的意思是，按下'enter'会触发表单提交事件或表单的第一个提交按钮的点击事件，而不管第一次提交是否为`display：none; ``或`visibility：hidden`。

   
   

   请注意，我的jQuery技能是有限的，所以测试被采用了（我一次只运行一次，试图防止在执行中发生冲突，评论在那个时候我没有跑的那个，两个都被提出来了 - 一个，显然，评论）可能是不足够的，并且不具有代表性。







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.

解决方案

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:

1. "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.
2. 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.
3. 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.

---

1. 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.

这篇关于按下“返回”在一个带有多个提交按钮的HTML表单中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！