点击按钮时“创建或更新”表单行为

时间:2017-02-14 18:37:27

标签: html forms http browser user-experience

我在网站上有以下工作流程:

  1. 一些用户John Doe通过表单1声明公司 (字段:姓名,总部所在地)
  2. 在John Doe提交(HTTP POST)表单1之后,他被重定向(HTTP 302)到公司表单2,其中包含有关该公司的其他法律信息。
  3. 问题是,如果John Doe在第2步中点击浏览器的后退按钮,他将登陆表单1,浏览器填充数据(使用他已经提交的值 - 这就是Firefox和主流浏览器似乎做)。

    John Doe可能会认为他可以使用此表单来更新某些信息(例如修复公司名称中的拼写错误),而他实际上会创建一个新公司,因为我们在服务器端不知道他是想申报新公司还是更新他刚创建的公司。

    你知道处理这个问题的任何简单解决方案吗?

6 个答案:

答案 0 :(得分:3)

在加载页面后使用javascript / jquery脚本清空所有输入。这样可以避免混淆"更新公司"。

jQuery看起来像这样:

$('#elementID').val('');

答案 1 :(得分:2)

您还可以manipulating the browser history处理这种情况 在表单2的加载上,并使用查询字符串传递在表单1的提交时生成的CompanyId。这样您就可以实际以用户身份更新公司

假设John提交了form1.html,这是一个独特的CompanyId" 1001"生成并重定向到form2.html。现在加载form2,您可以使用

修改浏览器历史记录form1.html?companyid = 1001
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 1", "form1.html?companyid=1001");

现在,当用户单击后退按钮并再次提交form1时。您可以在查询字符串中检查companyid并更新公司。

答案 2 :(得分:1)

我认为当用户可以返回到以前的表单并更新它(而不是阻止所描述的行为)时,它更加用户友好。 我在大多数情况下使用类似的方式处理描述的问题:

  1. 我们假设用户位于/some-page页面上,其中包含"创建新公司"按钮。 当用户打开此页面时,将在服务器端执行特殊方法createOrFindCompanyDraft()。这种方法创造了新的公司"草案"记录在DB中(仅适用于当前用户)。例如,草稿记录具有主键id=473。当您再次执行此方法时,它将返回与id=473相同的记录(使用"草稿"状态)。 "草案"记录不应显示在任何其他界面上。 并且"创建新公司"有链接/company/common/473

  2. 当用户转到/company/common/473时,您会显示表单1,该表单将从" draft"记录。用户第一次看到空表格。 从技术上讲,用户将更新现有记录,但您可以显示"创建新公司"页面上的标题。

  3. 然后用户转到表单2,例如/company/legal-info/473,您为此表单创建类似的草稿记录(类似于步骤1)。

  4. 当用户提交表单2时,您将删除" draft"来自记录id=473(以及任何相关记录)的状态。

  5. 下次当用户打开页面/some-page时,将为当前用户创建新的草稿记录。

  6. 浏览器历史记录将包含:

    • /some-page
    • /company/common/473
    • /company/legal-info/473
    • /some-page2

    我喜欢这种方法,因为所有形式都只是更新记录。您可以多次转到上一个/下一个表单(例如"返回" /"转发"浏览器按钮)。您可以关闭浏览器,明天打开未完成的表单。这种方式不需要对浏览器历史记录进行任何其他操作。

答案 3 :(得分:0)

实际上我想到了一个技巧来获得#34;在第一篇文章上创建,在"之后更新行为(就像用户认为它应该表现一样)。

我们假设第1步表单位于网址/create_company/。然后我可以让该页面生成随机代码XXX并重定向到/create_company/?token=XXX。当我创建公司时,我使用令牌XXX保存通过页面创建的信息(例如,我将其保存在用户的会话中,因为我们不需要永久保留该信息)当提交表单时,如果我知道公司已经使用此令牌生成,我知道用户使用了相同的表单实例,并且必须使用后退按钮,因为如果明确要求其他公司,则令牌会有所不同。

你怎么看? (我最初认为应该有一个更简单的解决方案,因为对于这么简单的问题,这似乎有点过度设计)

答案 4 :(得分:0)

这更像是一个用户体验问题。

我认为解决方案在于在该表单上提供给用户的信息,以帮助他们理解他们正在做什么。

例如,设置标题为“创建公司”,并将提交按钮设置为“创建公司”将帮助您的用户。在创建公司对象时使用唯一ID,并将id传回相同的URL以执行更新。然后,您应该更新标题和按钮,告诉用户他们正在更新而不是创建。

从这个意义上讲,我认为最好使用更通用的网址,例如/company?id=12345NavController -root-> ViewControllerA -> button -> push -> ViewControllerB --> ViewControllerC | | button -> presentModally | | | V | PopoverViewController | | | button -> push to the nav controller | | | | | ---------------------------------------

您还可以考虑使用Restful API协议来帮助您的服务器识别CRUD操作。 http://www.restapitutorial.com/lessons/httpmethods.html

答案 5 :(得分:0)

试试这个

<form autocomplete="off" ...></form>

另一个

使用临时表或会话来存储表单数据。如果提交了第2页表单,请使用第1页的临时数据,该数据存储在数据库或会话中。

在第1页和第2页中使用单独的键(隐藏字段)。