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

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中，它也接受按下回车键，在地址栏中显示文本值，但它不会将按钮的值显示为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中，按下回车键不提交任何按钮，但点击submit1 将发送的值。它会发送“提交”，而不是与“FF”不一致的“submit1”。但是，提交表格只会在两个浏览器中发送一个按钮的值，这意味着我可以通过检查是否存在GET['submitX']来检查哪个按钮被点击了！ Chrome在按下回车时的行为略有不同（提交按钮2）。歌剧似乎与FF一致...但所有4个浏览器只提交一个按钮。我没有安装早期版本的浏览器，但是......有人知道它是否适用于早期版本，特别是IE6？

Answer 1

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

相反，您可以对input[type=submit]的name属性使用两个不同的值，并解析这些服务器端以获取正确的操作。例如，你可以这样做：

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

只有成功（点击或默认）的名称 - 值对被提交的话，比方说，在PHP中，你可以很容易地做一些事情，如：

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

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

Answer 2

使用隐藏字段，他们是最好的方式来做到这一点。

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

Answer 3

如果您不确定是否使用按钮标记，下面是一个替代方案。

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

这将是比一个按钮标签更一致的某些浏览器实际上是提交按钮标签，而不是它的价值属性中的文本。例如，

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

在某些浏览器中，您可能会提交“one”，而在另一些浏览器中提交“two”。

如果要有条件地采取行动取决于按下特定的按钮，就必须根据所输入的文字这样做......

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

火狐： “TXT = &提交=按钮+ 1” IE： “TXT = &提交=按钮+ 1” Safari浏览器： “TXT = &提交=按钮+ 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> 

UPDATE

如果您想为您在您的评论提到的情况下，两个按钮...即一个按钮中途倒的形式来刷新基于一个什么子集的输入和另一个按钮在底部提交，这是你应该如何做...

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

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

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

在情况2和3中，您应该标记用户进行所需的字段。

这不需要特定的按钮来完成特定的事情 - 用户可以在表单的前半部分输入内容并仍然按下底部的按钮 - 因此您不希望根据逻辑上的按钮按下。

Answer 4

请勿将值附加到类型为submit的按钮上。提交类型的按钮提交表单。这是它所做的一切，并且应该有希望这样做。任何形式的提交方法都等同于目的和数据范围中同一表单的所有其他提交方法。为了在逻辑上正确处理HTML的意图，如果希望在提交时有条件地返回不同的数据，则需要使用单独的表单。

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

Answer 5

这将这样的伎俩在IE

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

简单，适用于所有浏览器

Answer 6

这是我做了这个问题。它适用于各种浏览器。

<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()); 
    }); 
});