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;它并将其从页面移开（例如，使用left：-4000px）。这是丑陋但可靠的。更改其tabindex也是一个好主意，因此它不会干扰预期的表格标签顺序。

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

“正常的方式......”我没有意识到有一种正常的方式，并提出这个选项作为实现目标的可能性，完全知道几乎肯定有任何数量的更好的方法，特别是考虑到我没有在同一表格上看到多个提交按钮的充分理由。
鉴于上述观点的后一句话，我想明确表示我不主张这样做。完全没有。感觉就像一个丑陋的，非语义的黑客，有一个以上的提交按钮，在OP的实例中 - 一个按钮显然不是提交按钮。
`position：absolute;的概念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至少有效。

我的意思是命中'enter'触发了form-submit事件，或者表单的第一个提交按钮的click事件，无论第一次提交是`display：none;`还是`能见度：隐藏`。

请注意我的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 个答案: