如何让chrome使用异步发布进行自动填充 [英] How to get chrome to autofill with asynchronous post

问题描述

我有一个表单，因为它是异步提交的。

I have a form that because it is being submitted asynchronously

<input id="idField" type="text" placeholder="Enter id" />
<input type="button" value="submit ID"  id="submitBtn" />

$(document).ready(function () {
    $("body").on("click", "#submitBtn", function () {
        var id = $("idField").val();
        $.ajax({
            type: "post",
            url: "post.php",
            data: {
                "id": id
            },
            success: function () {
                alert("done");
            }
        });
    });
});

因此，它似乎（ https://stackoverflow.com/a/11746358/1252748 ），Google拒绝自动填充我以前输入的数据。什么是最好的解决方法？

Because of this, it seems ( https://stackoverflow.com/a/11746358/1252748 ) that google is refusing to autofill data I've entered in the past. What would be the best way around this?

类似这样的东西？

<form method="post"> 
<input id="idField" type="text" placeholder="Enter id" />
<input type="button" id="submit" class="fr gen-btn" value="Submit" onClick="postForm()" /> 
</form>

function postForm() {
    var id = $("idField").val();
    $.ajax({
        type: "post",
        url: "post.php",
        data: {
            "id": id
        },
        success: function () {
            alert("done");
        }
    });
}

推荐答案

发现自己的情况非常相似。

Here's my suggested solution, after finding myself in a very similar situation.

1. 使用FORM标签来包装您的输入


2. Make确保表单已提交，以确保浏览器在下次存储输入字段值时（使用自动填充功能显示它们）

请参阅下面的HTML代码：

See HTML code below:

<form id="myForm" method="post" action="about:blank" target="_sink">
    <input id="idField" type="text" placeholder="Enter id" />
    <input id="submitBtn" type="button" value="submit ID" />
</form>
<iframe src="about:blank" name="_sink" style="display:none"></iframe>

<script type="text/javascript">
    // assuming jQuery is available
    $(document).ready(function () {
      $("#myForm").submit(function () {
        var id = $("#idField").val();
        $.ajax({
          type: "post",
          url: "//localhost/dummy/post.php",
          data: {
            "id": id
          },
          success: function () {
            alert("done");
          },
          error: function () {
            alert("Error"); // we expect an error here since we're not actually posting to a real server
          }
        });
      });
    });
</script>

当您在idField中输入一个值并按Enter（或点击提交按钮）时，它尝试使用ajax post请求将表单数据提交给远程服务器。
与此同时，它还会将表单提交给隐藏的iframe，这使得Chrome能够存储值以重新用于自动填充。

When you enter a value in the idField and press Enter (or click on the submit button), it tries to submit the form data to a remote server using an ajax post request. In the meantime, it will also submit the form to the hidden iframe which makes Chrome able to store the values to re-use for the autofill.

I还做了一个jsFiddle演示： http://jsfiddle.net/C5Qgf/

I've also made a jsFiddle demo of this: http://jsfiddle.net/C5Qgf/

这篇关于如何让chrome使用异步发布进行自动填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！