Flask/html - 在 Enter 键上只提交一个按钮

Question

我有以下表格：

<form method="post">
    <input type="submit" name="submit" value="Save" class="button">
    <input type="text" name="search_input" id="search_input">
    <input type="submit" name="submit" value="Search" id="searchBtn" class="button">
</form>

期望的行为是，当我在输入字段中输入一些文本并按 Enter 键时，表单将发布 submit/Search 和 search_input。

相反，我收到了两个单独的帖子：

request.form['submit'] =
ImmutableMultiDict([('submit', 'Save'), ('search_input', 'exampletext')])
ImmutableMultiDict([('search_input', 'exampletext'), ('submit', 'Search')])

我也试过用下面的js，结果还是一样：

var input = document.getElementById("search");
input.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
   event.preventDefault();
   document.getElementById("searchBtn").click();
  }
});

您有什么想法，出了什么问题以及如何解决它？

Answer 1

从您的 js 脚本中，我了解到您希望表单仅在您按 Enter 键时单击搜索而不保存？

如果是这样，那么您需要更改两个按钮的名称，因为表单提交使用 name 属性来标识元素。

由于您的两个输入具有相同的名称，您将获得两个帖子。

编辑：我刚刚发现当您按下回车键时默认点击表单中的第一个提交（不需要任何js代码），所以在您按下回车键时的第一个按钮（保存）默认情况下按下，并且从您的 js 脚本中按下第二个按钮（搜索）。

所以你只需将搜索按钮放在保存按钮的顶部，并使用 CSS 更改网页中的顺序