Question

我的网页上有以下html（简体）。

<button type="submit" name="action" value="ButtonA">Click Here</button>

在Firefox中，它提交“ButtonA”作为“action”表单值的值。但是，在IE7中，它提交了“Click Here”。有什么方法可以解决这个问题吗？我不想使用输入标签，因为我需要能够自定义文本而不影响发送回表单的值（本地化）。基本上，我希望能够拥有多个具有相同名称的按钮，并根据它们的值，在提交时执行不同的操作。在这种情况下，让IE正常运行有什么容易吗？

[详细]

也许我应该更清楚，但我不能使用

<input type="submit" name="Action" value="ButtonA">

因为我需要能够更改为本地化规则显示的文本，而不会影响随表单提交的按钮的实际值。

[详细]

更详细说明，基本上，我希望按钮能够根据语言说“保存”或“Sauver”，但不会将提交给服务器的值更改。我还希望有多个具有相同名称的按钮，并根据值，执行某些操作，而不是依赖于按钮名称，并测试是否存在该按钮的值。代码已经从这个角度编写了，我只想更改值中显示的文本，而不需要现有的服务器端处理代码。

这是一个非常好explanation of the problem的链接，有一些可能的解决方法。

Answer 1

一种解决方案是使用Javascript和隐藏字段

   <input type="hidden" name="actionparam" value="DoNothing">
   <input type="button" onclick="OnSubmitForm('ActionA')" Value="Click Here for A" />
   <input type="button" onclick="OnSubmitForm('ActionB')" Value="Click Here for B" />


   function OnSubmitForm(actionname) {
    var f = document.frm;
    f.actionparam.value = actionname;
    f.submit();
 }

这也可以作为隐藏的CATPCHA，你可以在javascript函数中添加一些客户端验证

编辑：

由于您说要降级到非JavaScript浏览器，您可以使用此版本，只允许一个默认操作给没有javascript的人

额外按钮在HTML中被禁用，但随后使用javascript重新启用经过测试的代码：

<html>
<head>
    <script type="text/javascript">
    <!--
    function OnSubmitForm(actionname) {
            var f = document.frm;
            f.actionparam.value = actionname;
            f.submit();
    }
    //-->
    </SCRIPT>
</head>
<body>
   <noscript>
        <div style="background-color: yellow; margin: 20px;" >
            You are using a limited version of the site because you don't have Javascript enabled
        </div>
    </noscript>


   <h1>form</h1>
    <form name="frm" method="post">
    <input type="hidden" name="actionparam" value="DefaultAction" />
    <button name="defaultbutton" type="submit">default action</button>
    <button name="extrabutton1" disabled onclick="OnSubmitForm('ExtraAction1')">Extra action 1</button>
    <button name="extrabutton2" disabled onclick="OnSubmitForm('ExtraAction2')">Extra action 2</button>
    </form>


   <h1>Results</h1>
   <h2>forms collection</h2>
   <ol>
   <%
   For x = 1 To Request.Form.count()
      Response.Write("<li>" + Request.Form.key(x) + "=" + Request.Form.item(x) + "</li>")
   Next
   %>
   </ol>


    <script type="text/javascript">
    <!--
    document.frm.extrabutton1.disabled = false;
    document.frm.extrabutton2.disabled = false;
    //-->
    </SCRIPT>

</body>
</html>

Answer 2

让它使用输入提交的常用解决方法是将值转换为多个“名称”属性，例如：

<input type="submit" name="submit.buttonA" value="Sausage" />
<input type="submit" name="submit.buttonB" value="Mash" />

我个人使用的表单层会自动转换，就好像点击了一个带有'buttonA'或'buttonB'值的'submit'控件，但在大多数环境中都应该很容易手动完成。

Answer 3

只需处理IE6对button元素的精彩实现。此解决方案依赖于Javascript，但有些人可能会发现它很有用。

在Spring框架中使用AbstractWizardController时特别烦人，因为button元素是向导的“Next”，“Back”和“Finish”按钮的理想解决方案，但在IE6中不起作用

所以，我最后编写了一个基于jQuery的小修补程序（尽管转换它是非常简单的，这样你就不必使用jQuery库了。）

$(function(){
if((window.XMLHttpRequest == undefined) && (ActiveXObject != undefined)) {
    $('button').click( function(event) {
        var rx = /\bvalue ?= ?(".*?"|'.*?')/i;
        var matches = $(this)[0].outerHTML.match( rx );
        if( matches != null )
            $(this).attr( 'value', matches[1].substring( 1, matches[1].length - 1 ) );
        $('button').not( $(this) ).attr('disabled','disabled');
    });
}
});

这将为所有按钮元素添加onclick事件。单击按钮时，它将抓取按钮的outerHTML，例如：

<button name="playerId" value="34">Walter Payton</button>

并解析value属性。为了得到这个值似乎很麻烦，但我发现getAttributeNode('value').value返回了innerHTML而不是指定的value属性，因此不是很有帮助。然后我们将正则表达式的子匹配设置为按钮的值。如果您使用双引号或单引号作为分隔符，它应匹配它，但您必须使用某种形式的分隔符。

这样做的结果是，不会发布“Walter Payton”而是发布“34”。缺点是页面上的按钮在表单提交之前也会变为“34”。

最后，脚本将找到除被点击的按钮元素之外的所有按钮元素，并将其disabled属性设置为禁用。这样可以确保它们不包含在POST中，也不会出现误报。

Answer 4

正如Eduardo所提到的，JavaScript听起来是你最好的选择。但是，您需要以某种方式考虑如果用户禁用了JavaScript，您将无法获得适当的值。

Answer 5

我认为你应该重新考虑这整个概念。我觉得你的情况是这样的：

用户点击保存或取消
服务器端，您检查“保存”或“取消”值
您根据此

实际上，保存按钮的值是什么并不重要。例如，在PHP中，您只需在Save元素中检查 a 值即可。无论值是“Save”还是“Sauver”，您都可以执行保存功能。

如果我离开这里，我道歉。如果我的假设是准确的，请告诉我。

Answer 6

好消息：微软在IE8（仅限标准模式）中修复此问题

坏消息：它仍处于测试阶段

这个jQuery fix可以正常工作，或者你可以破解自己的JS来处理IE。

对于那些建议通过按钮输入的人，这很好，但如果你想在你的按钮上使用图形或不同的样式，那么按钮是唯一的方法。

Answer 7

link you provided in the question解释说IE6会在每次提交表单时提交所有按钮，因此无论您使用何种变通方法，您的应用都无法使用IE6。我对此进行了测试并验证了IE6确实是这样做的。这意味着没有Javascript的＆lt; button＆gt;标签对于IE6是无用的，并且考虑到其他限制，它也受到IE7的严格限制。我能想到的唯一非Javascript解决方法是将你的＆lt; button＆gt;主要＆lt; form＆gt;之外的标记，以自己的形式显示。您可以使用＆lt; a＆gt;执行此操作标签也是，但我不能建议，因为链接总是GET请求，GET请求永远不会有副作用，例如修改数据。

<div style="float:left">
  <form name="shoppingCart" action="#c" method="GET">
    <input type="hidden" name="item1" value="hat">
    <input type="text" name="item1quantity" value="1"> Hat, red<br>
    <input type="hidden" name="item2" value="scarf">
    <input type="text" name="item2quantity" value="1"> Scarf, red<br>
    <button type="submit" name="button" value="purchase">Buy now!</button>
  </form>  
</div>
<div style="float:right">
  <form name="remove" action="#a" method="GET">
    <input type="hidden" name="item" value="item1">
    <button type="submit" name="button" value="delete1">Remove this item</button>
  </form>
  <form name="remove" action="#b" method="GET">
    <input type="hidden" name="item" value="item2">
    <button type="submit" name="button" value="delete2">Remove this item</button>
  </form>
</div>

使用多种形式的缺点是您可以传输的内容有限;如果用户更改上述表单中的数量，则当用户点击“删除”时，将不会提交信息。但是你可以考虑为非JS用户提供优雅的降级，并使用JS将主表单中的数据与隐藏表单同步。

Answer 8

我认为你应该使用<input type="submit" />代替<button>。

Answer 9

使用<input>代替<button>。否则，这是a description of a nice jQuery-based hack。

Answer 10

我不知道如何让它在IE7（或IE6）中运行而不需要JavaScript（或奇怪的多表单结构）。

是不是也可以以某种方式对后端进行本地化访问？比如说，文本是来自数据库还是只是内联在本地模板中？您应该能够在打印时和在后端验证表单时检索标签的本地化版本，不应该（尽管您只是使用不变的值，因为您应该真的能够做）？

始终存在JavaScript解决方案......

以下是一个概念验证，它需要一些调整而不是现成的jQuery单行程序，但它应该可以工作而无需更改任何HTML：

<!doctype html>
<html>

<head>

<title>Fix Buttons in IE6</title>

<script type="text/javascript">
function fixButtons() {
    var btns = document.getElementsByTagName('button');

    for (var i = 0; i < btns.length; i++) {
        btns[i].onclick = fixValue;
    }
}

function fixValue() {
    var btns = document.getElementsByTagName('button');

    for (var j = 0; j < btns.length; j++) {
        if (this == btns[j]) {
            this.value = this.getAttributeNode('value').value;
        }
        else {
            btns[j].parentNode.removeChild(btns[j--]);
        }
    }
}
</script>

</head>

<body onload="fixButtons()">

<form action="" method="get">
    <button type="submit" name="action1" value="value1">Do Action 1</button>
    <button type="submit" name="action2" value="value2">Do Action 2a</button>
    <button type="submit" name="action2" value="value3">Do Action 2b</button>
</form>

</body>

</html>

如果只需要在IE7中工作，而不是在IE6中，fiXValue()功能可以简化为：

this.value = this.getAttributeNode('value').value

Answer 11

查看这个使用IE行为（即javascript）的ie-button-fix项目，以巧妙地解决问题。

Answer 12

不使用javascript的简单解决方法是：

<button type="submit" name="action" value="ButtonA" onclick="this.value='ButtonA'">Click Here</button>

IE在单击按钮元素时发送内部HTML

12 个答案:

编辑：