Question

我遇到了一个奇怪的问题，即Internet Explorer正在添加其他浏览器添加的其他查询字符串参数。

该页面包含一个具有自动提交功能和“重置过滤器”按钮的表单。当用户点击回车键时，它会强制提交。当用户在Internet Explorer中输入时，由于某种原因选择了“重置过滤器”操作而不是提交按钮。

例如，IE将其添加到查询字符串中：

?search=this+is+text&op=Reset+Filters

在所有其他浏览器中，相同的查询如下所示：

?search=this+is+text

当我在PHP中检查$_GET超全局时，我注意到{I}仅在我在IE中运行应用程序时添加{strong>仅当我在表单中按下回车键时 /强>

根据下面的HTML，点击输入会将op添加到查询字符串是有道理的，因为提交按钮和重置按钮都包含在表单中。但为什么op只会被添加到IE？

op

知道为什么会这样吗？

更新：另一条可能很重要的信息。由于表单是自动提交的，因此第一个提交按钮实际上是隐藏的。我想知道这是不是因为IE使用第二个按钮作为提交处理程序。

Answer 1

在做了更多的研究之后，我意识到我问了一个错误的问题。但是，这不是让我删除这个问题，所以我在这里发布了我实际问题的答案。

我的问题应该是，“当单个表单中存在多个输入时，浏览器如何确定在按下回车键时选择哪个？”

答案是，当点击回车键时，选择type =“submit”的第一个输入。但是，IE将跳过隐藏display:none的任何提交按钮。

我在这里找到了答案：

Multiple submit buttons on HTML form – designate one button as default

我的修复方法是将提交按钮设置为position: absolute; left: -1000%而不是display:none。我从@bobince那里得到了关于链接答案的解决方案，但是，left:-100%没有将它完全推离页面，因此我将其更改为left:-1000%。

Answer 2

恕我直言，使用提交按钮似乎不对，除了“嘿，我提交了一些数据”之外，还传达了一些信息。如果用户按Enter键提交表单，则某些浏览器会发送与所有提交按钮关联的所有数据是合理的。

如果您只是重置表单上一部分的输入，可以使用：

<button type="reset">

如果您确实需要其他输入数据，则可能更合适一个复选框：

<form>
...
<input type="checkbox" id="edit-reset" name="op" value="Reset Filters">
<label for="edit-reset">Reset Filters</label>

<div class="submit-button">
  <input class="form-submit" type="submit" id="edit-submit-fda-views" name="" value="Submit">    
</div>
...
</form>

如果您不需要其他输入数据，可以使用两种形式：

<form>
...
<div class="submit-button">
  <input class="form-submit" type="submit" id="edit-submit-fda-views" name="" value="Submit">    
</div>
</form>

<form>
<div class="reset-button">
  <input type="submit" id="edit-reset" name="op" value="Reset Filters" class="form-submit">      
</div>
</form>

Answer 3

提交按钮是输入。它有一个名称和一个值。当您单击其中一个提交按钮时，它的值将以其名称添加到提交中。当您按下回车键时，表单会自动提交，但由于您使用了两个提交按钮，因此它们都会提供参数。您有很多其他人已经建议过的选项。您可以将类型更改为＆＃34; reset＆＃34;或者＆＃34;按钮＆＃34;，但是如果你需要在服务器上发布这两个动作，那么你可以用javascript截取击键并点击代码中的按钮。我可能会使用按钮类型来提交这样的表单。

<input type="button" id="edit-reset" name="op" value="Reset Filters"
class="form-submit" onclick="submitform()">

<Script>
function submitform()
{
 document.getElementById("your-form-name-here").submit();
} 
</script>

在单个表单上存在多个提交按钮时输入关键操作

3 个答案: