Question

我想要一个提交按钮，提交的值与按钮上显示的值不同。使用<input type="submit">，你似乎无法做到这一点。但是，<button type="submit">可以是两个不同的值。问题是，它能在所有浏览器中使用吗？

在此处尝试此测试代码：

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

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

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

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

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

Answer 1

Oldish post但我认为这里有一个错过的解决方案。 button[type=submit]一直存在行为不一致的问题，特别是对于旧的IE，并且来自@ Mark的测试看起来我们仍然有问题。

相反，您可以为name的{{1}}属性使用两个不同的值，并解析这些服务器端以获取正确的操作。例如，你可以这样做：

input[type=submit]

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

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

请注意，默认操作始终是源中显示的第一个操作。

Answer 2

如果您不确定是否使用按钮标记，可以选择此选项。

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

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

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

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

如果你想根据按下的特定按钮有条件地行动，你必须根据输入上的文字这样做......

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

Firefox：“？txt =＆amp; submit = Button + 1” IE：“？txt =＆amp; submit = Button + 1” Safari：“？txt =＆amp; submit = Button + 1”

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

作为最后一种选择，你有什么理由不能给他们一个表格字段让他们选择控制流而不是有两个按钮吗？

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

<强>更新

如果你想在你的评论中提到的情况有两个按钮...即在表格中间一个按钮刷新基于输入子集的内容和底部的另一个按钮提交，这是你应该怎么做......

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

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

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

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

这样就无需使用特定按钮来执行特定操作 - 用户可以键入表单的前半部分并仍然按下底部的按钮 - 因此您不希望根据按下哪个按钮来确定逻辑

Answer 3

这将在IE上实现技巧

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

简单并适用于所有浏览器

Answer 4

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

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

Answer 5

这就是我为这个问题所做的。它适用于各种浏览器。

<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（需要jQuery）：

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

Answer 6

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

我理解我的答案很不方便，但如果没有使用JavaScript添加和删除隐藏的输入字段，这是唯一正确的答案。

<button type =“submit”>兼容性？</button>

6 个答案: