2

我需要一个解决“默认按钮”不受欢迎的古老问题的解决方案。即，您在文本框中按Enter，但表单上有一个不是您想要触发的提交按钮（或者您可能根本不希望表单触发）。

我想知道以下“解决方案”。有点hacky，但据我所知应该是可靠的。

在表单中，第一件事是一个不可见的按钮。然后一些 jquery 立即禁用它。如果您在表单上按 Enter 键，则此按钮将被视为“默认按钮”并被触发，但由于“返回 false”事件处理程序，它什么也不做。

我之前见过的解决方案依赖于诸如 keydown 事件处理程序之类的东西，或者其他看似复杂/难以在每个浏览器中测试的东西。

我的解决方案（我以前从未见过，但可能不是唯一的）似乎更简单，而且我认为非常可靠。您甚至可以判断 javascript 是否被禁用并且有人按 Enter 键，因为服务器将在表单数据中收到此按钮。

<form action="/store/checkout" method="post">

    <input id="btnFakeSubmit" name="FakeSubmit" src="/images/pixel.gif"
     style="width:1px; height:1px; position:absolute;" type="image" /> 

        <script> 
            $('#btnFakeSubmit').click(function() {
                return false;
            });
        </script>

有关此解决方案的任何建议 - 包括在所有浏览器中隐藏按钮的最佳方法。

4

5 回答 5

6

这是我用来在 ASP.net 项目中解决此问题的方法。

<form runat="server" defaultbutton="DoNothing">
        <asp:Button ID="DoNothing" runat="server" Enabled="false" style="display: none;" />
于 2010-04-16T20:54:40.650 回答
6

你可以做的一件事是：

  • 将提交动作设置为javascript: return false;
  • 不要创建提交按钮
  • 创建另一个执行发送的按钮；它调用一个函数，将表单上的操作更改为真实地址，然后调用submit()表单对象。

例如这样的：

<form id="myform" action="javascript: return false">
....
<input type="button" onclick="submit_myform">
...

function submit_myform()
{
   jQuery("#myform").attr("action", "post.php").submit(); //untested
}

这样，除了显式点击此按钮外，没有其他方法可以提交表单。

于 2009-11-07T06:13:16.313 回答
0

只是一个问题：为什么您需要多个提交按钮，为什么要在所有浏览器中隐藏它？

于 2009-11-07T06:15:12.427 回答
0

你（大部分）在正确的轨道上。首先，您需要一个提交按钮。这应该是表单中的第一个提交按钮：

<input id="dummy" name="dummy" type="submit">

现在隐藏它：

#dummy { display: none; }

并禁用提交：

$(function() {
  $("#dummy").click(function() {
    return false;
  });
});

如果您想满足禁用 Javascript 的用户的需求，请检查是否存在名为“dummy”的 POST/GET（视情况而定）变量（因为只有在实际按下提交按钮时才会发送该变量）。如果您收到它，只需将表单原样发回给用户。然而，在大多数情况下，为那些禁用 Javascript 的人提供服务可能不值得。

如果通过弄乱操作和其他方法启用了 Javascript，您也可以只允许提交表单，但是（恕我直言）这可能过于笨拙。

于 2009-11-07T06:51:22.237 回答
0 
<script>
var statusSend = valse;
var checkSend = function(){return statusSend;}
</script>

<form id="myForm" action="/store/checkout" method="post" onSubmit="return checkSend();">
...
<button id="myButton">Send Data</button>
</form>

<script>
$("#myButton").click(function(e){
   e.stopPropagation();
   //check data ok
   statusSend = true;
   $("#myForm").submit();
});
</script>
于 2009-11-07T06:54:46.433 回答