2

我有一个带有多个提交按钮的表单，每个按钮都与用户希望如何保存和/或加载数据有关。

问题是（或曾经是）如果用户在表单中的最后一个（或任何其他）输入上按下回车键，则似乎被调用的提交按钮是表单顶部的“加载保存的表单”。用户 javascript 将返回按钮默认为“保存表单”的所有尝试似乎都是无用的，几乎就像浏览器太忙已经提交表单而没有任何 js 干扰一样。

最后，在 FireFox 3.5 中，我实际上让服务器端脚本回显了它为post变量接收到的内容，并发现没有任何提交按钮值被传回服务器。事实证明，当用户点击“保存”或“保存并打印”等时，我在脚本中有挂钩，但如果用户使用“加载页面”，它只会更新一个变量并继续正常加载页面上下文中的那个变量。

所以根本没有提交按钮值，它做了同样的事情，它只是加载页面。

所以，关于一个大问题：

这是典型的浏览器行为吗？甚至是可靠的浏览器行为？按 Enter 是否总是像根本没有按下提交按钮一样提交表单，或者某些浏览器是否喜欢在用户按 Enter 时选择一个按钮作为默认按钮？

如果是典型行为，建议的行动方案是什么？我打算让脚本保存任何东西，只要表单中有数据，但后来我意识到这更加危险，因为如果用户加载一个保存的表单，改变那里的想法，并改变表格日期并点击“加载表格”，然后它将保存以前表格中的表格数据，用于他们请求的新日期。

我考虑设置它，以便更改加载表单输入（选择日期和其他详细信息）将清除表单，以便服务器仍然收到一个空表单，因此不会覆盖任何以前的数据，但这也是有风险的，因为许多用户肯定会注意到并认为他们的数据已经丢失等，并且总是有微小的机会用户将几乎完成表单，上到顶部并摆弄表单加载选择只是为了确认他们选择了正确的，然后被迫从头开始。

我应该只有两种表单，一种用于加载，一种用于数据，但问题是表单加载部分中的所有数据都被主表单使用。我可以编写更多的 js 在提交时将两者结合起来，或者以第二种形式隐藏数据，但所有这些看起来都很笨拙。

本质上，我需要一个设置，使表单的顶部独立于主表单，但反之则不然。提交upperform不提交lower，但是提交lower确实提交higher。

好吧，我已经够久了。基本上我想知道解决方案是否已经存在，或者是否有其他人遇到过这个问题并找到了一个聪明的解决方案。我认为只要表单不为空就简单地保存表单是非常聪明的，直到我想到当用户转到页面时，它会自动加载给定日期的最适用的表单，从而更改加载变量几乎总是会引起麻烦。

在阅读了 Artelius 足以引起我注意的可能重复项后，我仍然不清楚跨浏览器将 Enter 按钮视为提交的一致性。

似乎该问题中的几乎每个人都认为按 Enter 会按下第一个可用的提交，这也是我的假设，直到一位朋友建议我（通过 CSS）隐藏表单顶部的另一个提交按钮，其中包含我想要输入的任何内容。正是当这让我得到相同的结果时，我终于查看了传递给服务器的内容（即，没有提交值）。所以这意味着要么

a）“输入为没有提交按钮只是提交”是某些或所有浏览器的新行为，

b）“进入只是提交”与“进入作为第一个提交按钮”只是浏览器的选择，没有趋势，只是典型的跨浏览器不可靠性，或者

c）每个人都只是假设“作为第一个提交按钮输入”是这种情况，因为我们大多数人只写代码if (situation1) else (assume not situation1)，我们都不确定浏览器在做什么。

我非常怀疑这是最后一个，但话又说回来，我也非常怀疑我们大多数人都知道哪些浏览器会做什么。如果有一个直接的答案我可以传递，我肯定会喜欢它。

哦，最后：虽然我知道使用按钮会简单得多，并且我正在认真考虑这一点，但我也想考虑其他选项，因为我真正唯一需要的提交按钮更少是当用户按 Enter 而不是其中一个按钮。

实际上，让我再过一秒钟：

我真正需要知道的唯一一件事是他们是否从其中一个文本输入中输入。如果我可以将它传递给服务器，我会知道是否应该保存或重新加载表单。但问题是（或者至少我遇到的问题）是当用户在输入中点击输入时，似乎没有更多的 js 游戏时间来捕获任何东西，在某些情况下，似乎就像浏览器触发了onclick提交按钮一样，因此并没有真正让我知道触发该按钮的真实事件。我会更多地使用 jquery，但是其他人是否观察到了这种行为？

4

2 回答 2

1

我最好的建议是只使用提交按钮，并让它提交表单最常见的用法。让其余按钮只是普通按钮，您可以将点击事件挂钩到这些按钮上。

只要确保您非常清楚当用户按下回车键时哪个按钮将被“按下”。让提交按钮成为最大的按钮。如果您有 3 个同样使用的按钮，我将完全放弃提交按钮......

编辑：我很确定大多数浏览器都会在表单中发布所有数据。如果您想在发布之前对数据进行一些检查，您可以为 onsubmit 添加一个监听器

<form onsubmit="checkData(this);" ... >

传入this将使您检查实际提交的表单：

function checkData(form) {
   var formName = form.id;
   //check all the data based on which form is being submitted
}
于 2009-09-08T11:54:10.547 回答
1

HTML5 规范为隐式表单提交指定了合成点击激活步骤：

表单元素的默认按钮是按树形顺序排列的第一个提交按钮，其表单所有者是该表单元素。

如果用户代理支持让用户隐式提交表单（例如，在某些平台上，当文本字段聚焦时，按下“enter”键会隐式提交表单），那么对于默认按钮已定义激活的表单执行此操作行为必须导致用户代理在该默认按钮上运行合成点击激活步骤。

于 2021-07-16T18:11:18.500 回答