<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中,它也接受按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

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

相反,您可以为该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>

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

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

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

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>

在某些浏览器中,您将提交"one",在其他浏览器中,"Two".

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

在此示例中,将回发显示文本("按钮1"或"按钮2").

Firefox:"？txt =&submit = Button + 1"IE:"？txt =&submit = Button + 1"Safari:"？txt =&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>

UPDATE

如果你想在你的评论中提到两个按钮...即在表格中间的一个按钮刷新基于输入子集的东西和底部的另一个按钮提交,这就是你应该怎么做做事...

1)按钮应该做同样的事情 - 只需提交表单.

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

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

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

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

Answer 3

这将在IE上发挥作用

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

简单,适用于所有浏览器