在具有多个提交按钮的HTML表单中按“返回”

Question

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

有经验的用户喜欢通过按“输入”或“返回”而不是单击相应按钮来提交表单。

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

我没有链接javascript监听器，它正在寻找按键或类似的东西。 所以我正在寻找一个更好的解决这个问题的方法。 但是，欢迎javascript或jquery解决方案（没有keypressed-listerner）。

非常感谢你的帮助。

Answer 1

将第一个按钮更改为<input type="button" /> 。

Answer 2

理论上，你至少可以在表单中有三个submit按钮。

按钮2是现有的“不太重要”按钮（从表单的中间向下），按钮3是现有表单中现有的“实际提交”按钮。

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

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

编辑回应评论：

我以为隐藏的按钮默认也被禁用了？ [的md5sum]

这是一个有效的观点，但我在发布之前只在Firefox（3.5.7，Ubuntu 9.10）中进行了测试，其中两种方法的技术都是¹ 。 粘贴完整的xhtml文件（如下所示），构成我在这些评论之后进行测试的基础。

<?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应该阻止按钮成为表单的活动部分（包含在结果集中，并且符合默认按钮的条件）; visibility: hidden不应该。 但是这些情况都被某些浏览器弄错了。 拥有一个不可见的第一个提交按钮的常规方法是position: absolute; 它并从页面移开（例如，左：-4000px）。 这是丑陋但可靠的。 更改其tabindex也是一个好主意，因此它不会干扰预期的表格标签顺序。

至少有两点我必须提出这个评论。 为了：

“正常的方式......”我没有意识到有一种正常的方式，并提出这个选项作为实现目标的可能性，完全知道几乎肯定有任何更好的方法，特别是考虑到我没有在同一表单上看到多个提交按钮的充分理由。
鉴于上述观点的后一句话，我想明确表示我不主张这样做。 完全没有。 感觉就像一个丑陋的，非语义的黑客，有一个以上的提交按钮，在OP的实例中 - 一个按钮显然不是提交按钮 。
“位置：绝对”的概念; left：-4000px;`我曾经发生过，但它似乎与`visibility：hidden;`的效果差不多，而且我有一种天生的不喜欢`position：absolute;`无论出于什么原因......所以我去了在撰写本文时我不太反感的选项... =）

我很欣赏你对tabindex的评论，这是我从未想过的东西。

我很抱歉，如果我听起来有点狡猾，已经晚了，我累了...... yadda-yadda; 自从我回到家后，我一直在各种浏览器中进行测试，似乎Firefox 3.5+在Windows XP和Ubuntu 9.10上都提供了相同的行为 - 报告“按钮一”，所有Webkit浏览器（Midori，Epiphany，Safari和Chrome）都失败了并报告“按钮两个”。

所以这显然是一个失败的想法display: none; 提交按钮。 而visibility:hidden至少visibility:hidden起作用。

我的意思是，无论第一次提交是“display：none;”还是“visibility：hidden”，点击“enter”都会触发表单提交事件或表单第一个提交按钮的click事件。
请注意我的jQuery技能是有限的，因此所使用的测试（我一次只运行试图防止执行中发生的冲突，评论我当时没有运行的那个，两者都被显示 - 一个，清楚，评论说）可能是不充分和不具代表性的。

Answer 3

第一个按钮有什么作用？ 如果你只是需要一个按钮来附加一个js监听器，它没有提交，请使用

<button type="button" id="myButton">Text Here</button>

Answer 4

是否可以在不太重要的提交按钮上使用绝对定位，并将其显示在HTML中的主要提交按钮之后？ 所以，你可以：

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

您的辅助提交按钮将首先出现在屏幕上，但是当按下输入时，主要提交按钮应该优先。

Answer 5

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

Answer 6

另一种解决方法是在表单的最开始创建一个额外的非功能提交输入，并使用不透明度隐藏它：

<input type="submit" value="" onclick="return false;" style="opacity: 0">

该按钮仍然会在页面上呈现，虽然是透明的，因此您必须为它提供一些不动产。 或者，您可以使用z-index将其推送到另一个元素后面，或者像其他人之前在此处建议的那样将其呈现在页面之外。

你获得的onclick="return false;" 是再次点击“Enter”时不会提交表格; 也没有页面重新加载。

在具有多个提交按钮的HTML表单中按“返回”

问题描述

6 个解决方案

解决方案1
19 2010-01-20 15:26:58

解决方案2
8 已采纳 2010-01-20 15:30:41

解决方案3
3 2010-01-20 15:29:58

解决方案4
0 2010-01-20 15:29:58

解决方案5
0 2014-06-23 03:12:56

解决方案6
0 2015-01-06 17:40:26

在具有多个提交按钮的HTML表单中按“返回”

问题描述

6 个解决方案

解决方案1 19 2010-01-20 15:26:58

解决方案2 8 已采纳 2010-01-20 15:30:41

解决方案3 3 2010-01-20 15:29:58

解决方案4 0 2010-01-20 15:29:58

解决方案5 0 2014-06-23 03:12:56

解决方案6 0 2015-01-06 17:40:26

解决方案1
19 2010-01-20 15:26:58

解决方案2
8 已采纳 2010-01-20 15:30:41

解决方案3
3 2010-01-20 15:29:58

解决方案4
0 2010-01-20 15:29:58

解决方案5
0 2014-06-23 03:12:56

解决方案6
0 2015-01-06 17:40:26