代码之家 › 专栏 › 技术社区 › mpen

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

html

mpen · 技术社区 · 15 年前

我想要一个提交按钮,它提交的值与按钮上显示的值不同。用 <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中,它会适当地用这两个值更新我的地址栏(并响应我在文本框中按Enter键)。在IE8中,它还接受按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 将发送一个值。它将发送“submit”,而不是与ff不一致的“submit1”。但是,提交表单只发送一两个浏览器中的按钮,这意味着我可以检查 哪一个 通过检查是否 GET['submitX'] 而是存在!Chrome在按Enter(提交按钮2)时的行为略有不同。歌剧似乎符合FF…但是所有4个浏览器都只提交一个按钮。不过,我没有安装任何早期版本的浏览器……有人知道它在早期版本中是否有效,特别是IE6吗?

6 回复 | 直到 10 年前

contrebis 14 年前

旧的帖子,但我认为这里有一个解决办法被忽略了。这个 button[type=submit] 一直以来都存在行为不一致的问题,尤其是对于旧的IES,而且从@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
}
?>

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

Fenton 15 年前

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

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

在某些浏览器中,您将提交“一个”,在其他浏览器中提交“两个”。

如果您想根据所按下的特定按钮有条件地执行操作,则必须根据输入的文本执行此操作…

在本例中,显示文本(“按钮1”或“按钮2”)将被回发。

火狐:“?txt=提交=按钮+1“ IE:“?”txt=提交=按钮+1“ 狩猎:“?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>

更新

如果你想为你在评论中提到的案件设置两个按钮…也就是说,一个按钮沿着窗体的一半向下,根据一个子输入集刷新某个内容,另一个按钮位于要提交的底部,这是您应该做的事情…

1)两个按钮应该做相同的事情-只需提交表单。

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

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

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

这就不需要特定的按钮来做特定的事情——用户可以在表单的前半部分键入,但仍然可以点击底部的按钮——所以您不希望基于逻辑来按下按钮。

George Panic 13 年前

这对Ie有好处

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

简单,适用于所有浏览器

Saleh 15 年前

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

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

James Paterson 10 年前

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

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

-2

austin cheney 15 年前

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

我知道我的答案不方便,但它是唯一正确的答案,不需要使用javascript添加和删除隐藏的输入字段。