How to enable autocomplete in <input > with <label ><input ><button >

Question

I am not web developer, but I have a task to add autocomplete function for an input box. Please treat me as a very beginner.

<div>
  <label id="email_label" for="send_email" style="padding-right:5px">
    Send Email:
  </label>
  <input id="send_email" type="text" placeholder="e.g. [email protected]" />
  <button id="ack" onclick="requestAck()">
    Request
  </button>
</div>

requestAck() is a javascript function sending a email to address given by user (i.e. address in <input >). I am trying to add a flag in <input autocomplete="on" ...>, but it doesn't work. Perhaps because it's not in a <form></form> environment.

Could you help me to modify this code adding autocomplete (from cache) without changing other functions. Many thanks!

brein · Accepted Answer · 2019-07-10 07:24:11Z

1

Try setting the property name="email" on the input tag, without that set the browser doesn't know what's supposed to autocomplete the field with :)

protip: I warmly suggest you to set the type of the input to email with type="email" instead of text, it's not required but it will help validating the input!

check this code:

        <div>
            <label id="email_label" for="send_email" style="paddingright:5px">Send Email:</label>
            <input id="send_email" type="email" name="email" placeholder="e.g. [email protected]" />
            <button id="ack" onclick="requestAck()">Request</button>
        </div>

EDIT: Final solution discussed in comments

<form onsubmit="submitForm(event)">
  <label id="email_label" for="send_email" style="padding-right:5px">Send Email:</label>
  <input id="send_email" type="email" autocomplete="email" name="email" placeholder="e.g. [email protected]" />
  <button id="ack" type="submit">Request</button>
</form>
<script>
  function submitForm(e) {
    e.preventDefault(); // this prevents the page from reloading
    requestAck();
  }

  //dummy function so the javascript won't crash:
  function requestAck() {}
</script>

Working example: https://codesandbox.io/s/focused-cray-ubkw4

edited Jul 10, 2019 at 7:24

answered Jul 9, 2019 at 4:45

brein

1,4299 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Weizhi Over a year ago

thanks. add type check is a nice suggestion! however, it cannot help with the autocomplete, which should only depend on the historical input.

brein Over a year ago

have you set up the name property too? the browser matches the historical inputs with the name property on the inputs.. I have set up a working example here: codesandbox.io/s/silent-dew-f0w2h does it work for you? If not may I ask you what system/browser are you working on?

Weizhi Over a year ago

The example "partially" works. The problem is you cannot update the tag list. For example, you enter [email protected], and you click request. When you reload the page, [email protected] cannot be popped. I think the problem is "the button doesn't link to the input" unlike the example here: w3schools.com/tags/tryit.asp?filename=tryhtml5_button_form However, i don't know how to translate my code in this format...

brein Over a year ago

ok, so the question wasn't clear to me.. you want to write an email address, click submit and then have the email to remain in the input field?

Stephen P Over a year ago

@Weizhi - per my comment on Nidhin's answer, you could actually set autocomplete="email" to hint to the browser that it is previously entered email addresses that should be considered for completion. See the allowed values for the autocomplete attribute.

|

Collectives™ on Stack Overflow

How to enable autocomplete in <input > with <label ><input ><button >

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related