Javascript 用于动态生成表单的浏览器本机自动完成（使用ajax处理）

我正在动态生成一个表单。为了简单起见，假设它是一个带有电子邮件/密码的登录表单。表单已提交，但在提交时它会触发一个处理实际登录的AJAX请求，并取消提交事件（

e.preventDefault（）

）

我使用

e.preventDefault（）

取消表单的默认操作，即转到“操作”中的页面，但这似乎也会取消浏览器的自动完成检测

我认为您需要满足几个要求才能使本机autocomplete正常工作：

• 您的输入字段必须具有名称

---

• 必须提交表格好的，我找到了一种复杂的方法：
  下面是javascript：

  function ajaxit() {
      var iFrameWindow = document.getElementById("myframe").contentWindow;
      iFrameWindow.document.body.appendChild( document.getElementById("myform").cloneNode(true));   
      var frameForm = iFrameWindow.document.getElementById("myform");
      frameForm.onsubmit = null;
      frameForm.submit();
      return false;
  }
  

  以下是html：

  <form id="myform" onsubmit="return ajaxit();" autocomplete="on">
      <input id="foo" name="foo"/> 
      <input type="submit" />
  </form>
  <iframe id="myframe" src=""></iframe> <!-- you'll want this hidden -->
  

  单击submit将运行ajaxit（）方法。该方法在iframe中创建相同的表单，并将其提交给服务器。您可以将submit放在服务器请求上，也可以执行单独的ajax请求并忽略iframe
  我知道这很难看，但它很管用

  ---

  编辑：这里有一个可以玩的解决方案。
  DMOS解决方案极大地启发了我的解决方案，但它与我的解决方案有很大的不同，因此我认为制作自己的解决方案是一个不错的主意，但奖励归DMOS：p
  DMOS解决方案将表单移动（或复制）到iframe，然后提交表单。您希望这样做的原因是，您的“父项”不会从重新加载。有一个更简单的解决方案：让表单提交到iframe。这是一样的，您不必复制任何节点
  这一步也是完全可以重复的。唯一的缺点是您无法控制何时添加自动完成条目。您可能只想添加有效的条目，但至少本例完全模拟了在不涉及ajax的情况下正常表单的行为方式。如果您想控制添加到自动完成中的内容，请使用dmos的解决方案，复制表单并在iframe中提交
  对我来说，这就足够了：

  <form onsubmit="return ajaxit();" autocomplete="on" target="the_iframe">
      <input id="foo" name="foo"/> 
      <input type="submit" />
  </form>
  <iframe id="the_iframe" name="the_iframe" src="javascript:false"></iframe> <!-- you'll want this hidden -->
  

  最好的部分：不需要额外的JavaScript就可以完成这项工作（除了为表单生成唯一的id/名称之外，这非常简单）

  ---

  jsFiddle:
  在对其他答案的解决方法进行了一些评论后，我决定为任何可以等待浏览器正确处理此问题的人列出此列表
  因此，作为总结，这些浏览器版本支持使用JavaScript生成的表单上的自动完成值：
  • 火狐25
  • Chrome33（目前的版本是31，所以很快就会发布）
  • Internet Explorer 11（）

  ---

  聪明，我喜欢。我想知道为什么我没有想到这一点：P我有一个想法，

  iframe

  不起作用，但显然它起作用了！实际上有两种不同的情况：使用AJAX提交的表单和动态生成的表单（可能也使用AJAX提交）。jsbin的例子只包括第一个。你能详细说明一下发生了什么吗？与直接提交表单相比，在iframe中提交表单会带来什么好处？我认为我们试图解决的问题是如何使用AJAX而不是普通的表单提交机制提交表单。在我的情况下，我必须提交JSON。服务器将不接受正常的表单编码（例如application/x-www-form-urlencoded）。Gili，这不是问题所在。问题是，如果使用AJAX提交，那么浏览器将不会记住将来自动完成的值。这个问题不涉及使用ajax提交表单。它假设您已经这样做了，并且希望浏览器在其自动完成历史记录中存储这些值。有人在大型站点的生产中使用过这个吗？使用这种方法有什么陷阱吗？作为一种安全措施，如果您提交敏感数据，请记住向表单添加一个不是get值的method属性！谢谢你的赏金！我想知道，如果大多数浏览器仍在添加该值，您是否会返回HTTP 500？如果这很重要的话，也许值得一试。我不认为这很重要。我发布到的页面无论如何都不是一个真正的页面（

  javascript:false

  ），仅仅拥有一个总是返回

  500

  的空闲页面来实现这一点是不确定的。在当前的浏览器中，我似乎无法实现这一点：我认为你是正确的。这个解决方案对我也不起作用了。我将我的解决方案添加到了你的jsbin中，它可以在chrome上运行。因此，看起来您可能必须立即提交。