发表新帖
发表新帖

Trigger autocomplete without submitting a form

后端 未结
关注
10 631
甜味超标
甜味超标 2020-11-29 01:44

I am writing a very simple web app with three text inputs. The inputs are used to generate a result, but all the work is done in Javascript, so there is no need to submit a

相关标签:
10条回答
  • 执笔经年
    2020-11-29 01:48

    Make sure you're submitting the form via POST. If you're submitting via ajax, do <form autocomplete="on" method="post">, omitting the action attribute.

    0 讨论(0)
  • 一向
    2020-11-29 01:52

    For those who would rather not change their existing form functionality, you can use a second form to receive copies of all the form values and then submit to a blank page before your main form submits. Here is a fully testable HTML document using JQuery Mobile demonstrating the solution.

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <form method="post">
        <input type="text" name="email" />
        <input type="submit" value="GO" onclick="save_autofill(this);" />
    </form>


    <script>
        function save_autofill(o) {
            $(':input[name]', $('#hidden_form')).val(function () {
                return $(':input[name=' + this.name + ']', $(o.form)).val();
            });

            $('#hidden_form').find("input[type=submit]").click();
        }
    </script>

    <iframe name="hidden_iframe" style="display:none"></iframe>
    <form target="hidden_iframe" id="hidden_form" action="about:blank" style="display:none">
        <input type="text" name="email" />
        <input type="submit" />
    </form>
</body>
</html>

    The save_autofill function just needs to be called on your main form submit button. If you have a scripted function that submits your form, place that call after the save_autofill call. You must have a named textbox in your hidden_form for each one in your main form.

    If your site uses SSL, then you must change the URL for about:blank with https://about:blank.

    0 讨论(0)
  • 故里飘歌
    2020-11-29 01:58

    We know that the browser saves its information only when the form is submitted, which means that we can't cancel it with return false or e.preventDefault()

    What we can do is make it submit the data to nowhere without reloading a page. We can do that with an iframe

    <iframe name="
    0 讨论(0)
  • 感动是毒
    2020-11-29 02:01

    I haven't tested this, but it might work if you submit the form to a hidden iframe (so that the form is actually submitted but the current page is not reloaded).

    <iframe name="my_iframe" src="about:blank"></iframe>

<form target="my_iframe" action="about:blank" method="get">...</form>
    0 讨论(0)
  • 轮回少年
    2020-11-29 02:03

    Tested with Chrome, IE and Firefox:

    <iframe id="remember" name="remember" class="hidden" src="/content/blank"></iframe>

<form target="remember" method="post" action="/content/blank">
  <fieldset>
    <label for="username">Username</label>
    <input type="text" name="username" id="username" value="">
    <label for="password">Password</label>
    <input type="password" name="password" id="password" value="">
  </fieldset>
  <button type="submit" class="hidden"></button>
</form>

    In your Javascript trigger the submit, e.g. $("form").submit(); $("#submit_button").click() (updated from comments)

    You need to return an empty page at /content/blank for get & post (about:blank didn't work for me but YMMV).

    0 讨论(0)
  • 孤城傲影
    2020-11-29 02:05

    From what i searched.. it seems you need to identify the names. Some standard names like 'name', 'email', 'phone', 'address' are automatically saved in most browser.

    Well, the problem is, browsers handle these names differenetly. For example, here is chrome's regex:

    • first name: "first.*name|initials|fname|first$"
    • email: "e.?mail"
    • address (line 1): "address.*line|address1|addr1|street"
    • zipcode: "zip|postal|post.*code|pcode|^1z$"

    But chrome also uses autocomplete, so you can customize the name and put an autocomplete type, but i believe this is not for custom fields..

    Here is chrome's standard

    And it's another thing in IE, Opera, and Mozilla. For now, you can try the iframe solution there, so you can submit it. (Maybe it's something semi-standard)

    Well, that's all i can help.

    0 讨论(0)
 看不清?
提交回复
热议问题