8

我的网页中有以下 html（简化）。

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

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

[更多的]

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

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

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

[更多的]

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

这是一个很好地解释问题的链接，并提供了一些可能的解决方法。

4

12 回答 12

3

一种解决方案是使用 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>
于 2008-12-18T17:56:56.143 回答
2

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

在 Spring 框架中使用 AbstractWizardController 时特别烦人，因为该button元素是向导的“下一步”、“返回”和“完成”按钮的理想解决方案，但在 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 事件。单击按钮时，它将抓取按钮的外层HTML，例如：

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

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

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

最后，脚本将找到所有按钮元素，除了被点击的元素，并将它们的disabled属性设置为禁用。这可确保它们不包含在 POST 中，并且您不会得到误报。

于 2009-06-17T16:28:20.717 回答
2

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

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

我个人使用的表单层会自动转换，就好像单击了值为“buttonA”或“buttonB”的“提交”控件，但在大多数环境中手动操作应该很容易。

于 2008-12-20T13:09:48.807 回答
1

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

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

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

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

于 2008-12-18T21:47:46.113 回答
1

您在问题中提供的链接说明 IE6 会在每次提交表单时提交所有按钮，因此无论您使用什么解决方法，您的应用都无法与 IE6 一起使用。我对此进行了测试并验证了 IE6 确实做到了这一点。这意味着如果没有 Javascript，<button> 标签在 IE6 中是无用的，并且考虑到其他限制，它在 IE7 中也受到严重限制。我能想到的唯一非 Javascript 解决方法是将您的 <button> 标签放在主 <form> 之外，以它们自己的形式。您也可以使用 <a> 标记来执行此操作，但我不建议这样做，因为链接始终是 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 将主窗体中的数据与隐藏窗体中的数据同步。

于 2008-12-18T22:03:50.653 回答
1

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

  • 用户单击保存或取消
  • 服务器端，您检查“保存”或“取消”值
  • 您基于此执行操作

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

如果我离开这里，我很抱歉。让我知道我的假设是否准确。

于 2008-12-18T19:07:42.273 回答
1

正如 Eduardo 所提到的，JavaScript 听起来是您的最佳选择。但是，您需要以某种方式考虑这样一个事实，即如果用户禁用了 JavaScript，您将不会收到适当的值。

于 2008-12-18T18:00:25.667 回答
0

我认为您应该使用 an<input type="submit" />而不是<button>.

于 2008-12-18T17:51:07.933 回答
0

使用<input>而不是<button>. 否则，这里是一个不错的基于 jQuery 的 hack 的描述。

于 2008-12-18T17:53:13.920 回答
0

我不知道有什么方法可以让它在 IE7（或 IE6）中运行而不需要 JavaScript（或奇怪的多形式结构）。

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

总是有 JavaScript 解决方案......

下面是一个概念验证，比现成的 jQuery one-liner 需要一些调整，但它应该可以在不需要更改任何 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
于 2008-12-19T00:27:06.357 回答
0

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

于 2009-09-03T10:09:14.097 回答
-1

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

<button type="submit" name="action" value="ButtonA" onclick="this.value='ButtonA'">Click Here</button>
于 2012-02-13T01:29:19.723 回答