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

Question

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

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

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

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

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

?search=this+is+text

当我在 PHP 中检查 $_GET 超全局时，我注意到 op 仅在我在 IE 中运行应用程序时添加，并且仅当我在表单中按 enter 键时添加。

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

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

知道为什么会发生这种情况吗？

更新：另一条可能很重要的信息。因为表单是自动提交的，所以第一个提交按钮实际上是隐藏的。我想知道这是否就是 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

提交按钮是一个输入。它有一个名称和一个值。当您单击其中一个提交按钮时，它的值将被添加到带有其名称的提交中。当您按下回车键时，表单会自动提交，但由于您使用了两个提交按钮，它们都在贡献一个参数。你有很多其他人已经建议的选择。您可以将类型更改为“重置”或“按钮”，但如果您需要为这两个操作发布到服务器，那么您可以使用 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>

Answer 3

恕我直言，使用提交按钮确实传达了一些信息，而不是“嘿，我已经提交了一些数据”，这似乎是错误的。如果用户按回车键提交表单，一些浏览器会发送与所有提交按钮相关的所有数据是合理的。

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

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