javascript - How to get chrome to autofill with asynchronous post -
i have form because 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"); } }); }); });
because of this, seems ( https://stackoverflow.com/a/11746358/1252748 ) google refusing autofill data i've entered in past. best way around this?
something 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 suggested solution, after finding myself in similar situation.
- use form tag wrap inputs
- make sure form submitted ensure browser stores input field values next time (to display them "autofill" feature)
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 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"); // expect error here since we're not posting real server } }); }); }); </script>
when enter value in idfield , press enter (or click on submit button), tries submit form data remote server using ajax post request. in meantime, submit form hidden iframe makes chrome able store values re-use autofill.
i've made jsfiddle demo of this: http://jsfiddle.net/c5qgf/
Comments
Post a Comment