Html <button type="submit"> 兼容性？

<button type="submit"> compatibility?

提问by mpen

I'd like to have a submit button that submits a different value than is displayed on the button. With <input type="submit">you can't seem to do this. With <button type="submit">however, these can be two different values. The question is, will it work in all browsers?

我想要一个提交按钮，该按钮提交的值与按钮​​上显示的值不同。随着<input type="submit">你似乎无法做到这一点。随着<button type="submit">但是，这些可以是两个不同的值。问题是，它是否适用于所有浏览器？

Trying this test code here:

在此处尝试此测试代码：

<form method="get" action="">
    <input type="text" name="txt"/>
    <button type="submit" name="btn" value="val">text</button>
</form>

In FF 3.6 it updates my address bar with both values appropriately (and responds to me pressing enter in the text box). In IE 8, it also accepts pressing enter, displays the text value in the address bar, but it doesn't show the button's value as a GET param at all... does that mean it's not submitting it?

在 FF 3.6 中，它用两个值适当地更新我的地址栏（并响应我在文本框中按 Enter 键）。在 IE 8 中，它也接受按 Enter，在地址栏中显示文本值，但它根本不将按钮的值显示为 GET 参数......这是否意味着它没有提交它？

---

---

I can't use hidden inputs because I need to determine which button is clicked without JS.

我不能使用隐藏输入，因为我需要确定在没有 JS 的情况下点击了哪个按钮。

---

---

Test 2:

测试 2：

<form method="get" action="">
    <input type="text" name="txt"/>
    <button type="submit" name="submit1" value="submit1">submit</button>
    <input type="submit" name="submit2" value="submit2"/>
    <input type="submit" name="submit3" value="submit3"/>
</form>

In IE8, hitting enter does not submit any of the buttons, but clicking submit1 willsend a value. It'll send "submit", not "submit1" which is inconsistent with FF. However, submitting the form only sends the value of onebutton in both browsers, which means I might be able to check whichbutton was clicked by checking if GET['submitX']exists instead! Chrome has slightly different behavior on pressing enter (submits button2). Opera seems consistent with FF... but all 4 browsers only ever submit one button. I don't have any earlier versions of the browsers installed though.... does anyone know if it works in earlier versions, particularly IE6?

在 IE8 中，按 Enter 不会提交任何按钮，但单击 submit1会发送一个值。它将发送“提交”，而不是与 FF 不一致的“提交 1”。但是，提交表单只会在两个浏览器中发送一个按钮的值，这意味着我可以通过检查是否存在来检查点击了哪个按钮GET['submitX']！Chrome 在按下 Enter 时的行为略有不同（提交 button2）。Opera 似乎与 FF 一致……但所有 4 个浏览器都只提交一个按钮。我没有安装任何早期版本的浏览器.... 有谁知道它是否适用于早期版本，尤其是 IE6？

采纳答案by contrebis

Oldish post but I think there is a solution that has been missed here. The button[type=submit]has always had problems with inconsistent behaviour, particularly with old IEs, and from @Mark's tests looks like we still have problems.

陈旧的帖子，但我认为这里遗漏了一个解决方案。本button[type=submit]一直有与行为不一致的问题，特别是与旧的IE，并从@ Mark的测试看起来我们还是有问题。

Instead you can use two different values for the nameattribute of the input[type=submit]and parse these server-side to get the correct action. For example, you can do:

相反，您可以为 的name属性使用两个不同的值，并在input[type=submit]服务器端解析这些值以获得正确的操作。例如，您可以执行以下操作：

<form method="get" action="">
    <input type="text" name="txt"/>
    <input type="submit" name="action[do_something]" value="Do Something Cool"/>
    <input type="submit" name="action[do_another]" value="Do Something Dangerous"/>
</form>

Only the successful (clicked or default) name-value pair gets submitted so, say, in PHP you can easily do something like:

只有成功的（点击的或默认的）名称-值对才会被提交，所以，比如说，在 PHP 中，你可以轻松地执行以下操作：

<?php
if (isset($_GET['action']['do_something'])) {
    // do something
} else {
    // do another thing
}
?>

Note the default action will always be the first that appears in the source.

请注意，默认操作将始终是源中出现的第一个操作。

回答by Fenton

Here is an alternative if you aren't sure about using a button tag.

如果您不确定是否使用按钮标签，这里有一个替代方法。

<form method="get" action="">
    <input type="text" name="txt" />
    <input type="hidden" name="myinput" value="myvalue" />
    <input type="submit" name="submit" />
</form>

This will be more consistent than a button tag as as some browsers actually submit the text inside of the button tags rather than its value attribute. For example

这将比按钮标签更一致，因为某些浏览器实际上提交按钮标签内的文本而不是其 value 属性。例如

<button name="mybutton" type="submit" value="one">Two</button>

In some browsers, you would have "one" submitted, in others, "Two".

在某些浏览器中，您会提交“一个”，而在其他浏览器中，您会提交“两个”。

If you want to act conditionally depending on the particular button pressed, you would have to do so based on the text on the input...

如果您想根据按下的特定按钮有条件地采取行动，则必须根据输入上的文本进行操作...

In this example, the display text ("Button 1" or "Button 2") would be posted back.

在此示例中，将回发显示文本（“按钮 1”或“按钮 2”）。

Firefox: "?txt=&submit=Button+1" IE: "?txt=&submit=Button+1" Safari: "?txt=&submit=Button+1"

Firefox：“?txt=&submit=Button+1” IE：“?txt=&submit=Button+1” Safari：“?txt=&submit=Button+1”

And so on. Giving two form elements the same name is generally accepted as being possible as browsers support it. It isn't formally documented though, so you'll have to decide if you want to act on it.

等等。为两个表单元素提供相同的名称通常被认为是可能的，因为浏览器支持它。不过，它没有正式记录在案，因此您必须决定是否要对其采取行动。

As a final alternative, is there any reason why you can't give them a form field that let's them choose the control flow rather than having two buttons?

作为最后的选择，有什么理由不能给他们一个表单域，让他们选择控制流而不是两个按钮？

<form method="get" action="">
    <input type="text" name="txt" />
    <select name="myname">
        <option value="A">A</option>
        <option value="B">B</option>
    </select>
    <input type="submit" name="submit" value="Go" />
</form>

UPDATE

更新

If you want two buttons for the case you mention in your comment... i.e. one button half-way down the form to refresh something based on a sub-set of inputs and another button at the bottom to submit, this is how you should do things...

如果您想要两个按钮用于您在评论中提到的案例......即表单中间的一个按钮根据输入的子集刷新某些内容和底部的另一个按钮提交，这就是您应该如何做事...

1) The buttons should both do the same thing - simply submit the form.

1）按钮都应该做同样的事情 - 只需提交表单。

2) You should detect server-side if you have a valid form (if they are working sequentially and have hit the first of the two submits, you will have blank inputs for the second half of the form - rendering it invalid).

2）如果您有一个有效的表单，您应该检测服务器端（如果它们按顺序工作并且已经点击了两次提交中的第一个，则表单的后半部分将有空白输入 - 使其无效）。

3) You should detect server-side if you have enough information to perform the calculation or refresh that you mention in your comment.

3）如果您有足够的信息来执行您在评论中提到的计算或刷新，您应该检测服务器端。

In cases 2 and 3, you should mark the fields that are required for the user to proceed.

在情况 2 和 3 中，您应该标记用户继续操作所需的字段。

This negates the need for particular buttons to do particular things - the user could type in the first half of the form and still hit the button at the bottom - so you don't want to base your logic on which button was pressed.

这不需要特定的按钮来做特定的事情——用户可以在表单的前半部分输入，但仍然点击底部的按钮——所以你不想将你的逻辑基于按下哪个按钮。

回答by George Panic

This will do the trick on IE

这将在 IE 上起作用

<button type="submit" name="submit1" value="submit1" onclick="this.value='submit1' ">submit</button>

Simple and works on all browsers

简单且适用于所有浏览器

回答by Idle Cashew

This is what I did for this problem. It works across browsers.

这就是我为这个问题所做的。它可以跨浏览器工作。

<form method="get" action="">
    <input type="text" name="txt"/>
    <input type="hidden" name="btn" id="hiddenbtn" />
    <button type="submit" name="btn1" value="val">text</button>
</form>

Javascript (Requires jQuery):

Javascript（需要 jQuery）：

$(document).ready( function{
    $(":submit[name='btn1']").on("click", function() {
        $("#hiddenbtn").val($(this).val());
    });
});

回答by Saleh

Use hidden fields, they are the best way to do it.

使用隐藏字段，它们是最好的方法。

<input type="hidden" value="any value you want to enter" />

回答by Saleh

Don't attach values to buttons of type submit. A button with type submit submits a form. That is all it does and should ever hope to do. Any submission method of any form is equal to all other submission methods of that same form in purpose and data scope. To be logically correct to the intent of HTML you need to use separate forms if you wish different data to be conditionally returned upon submission.

不要将值附加到提交类型的按钮。类型为 submit 的按钮提交表单。这就是它所做的并且应该永远希望做的事情。任何形式的任何提交方法在目的和数据范围上等同于同一形式的所有其他提交方法。为了在逻辑上符合 HTML 的意图，如果您希望在提交时有条件地返回不同的数据，则需要使用单独的表单。

I understand my answer is inconvenient but it is the only correct answer without adding and removing hidden input fields using JavaScript.

我知道我的答案很不方便，但这是唯一正确的答案，无需使用 JavaScript 添加和删除隐藏的输入字段。