3

I have a webpage with an email text field, that is not inside a <form> tag, like so:

<input id="email" label="False" name="email" placeholder="Email" required="required" type="email" value="">

I'm using the latest Chrome (v35) and I've previously entered an email that is "example@domain.com" (for the sake of the explanation).

The problem is this: When I reload my webpage, click on the email text field and start typing "exa", an auto-complete box pops-up with "example@domain.com". If I move the mouse cursor over the suggestion, without clicking it, the text field shows the "example@domain.com" inside it. When I move the cursor away from the suggestion box, the text field still shows the full email address.

Why is that a problem? Because when I try to read the value of the text field using jQuery or vanilla javascript, I get "exa", instead of "example@domain.com".

$("#email").val(); // returns "exa"

If I envelope the input text field inside a <form> tag, the problem described above, doesn't occur - the auto-completed text disappears from the input field when the mouse cursor moves away from it, so the text field and the value reading is in sync.

<form><input id="email" label="False" name="email" placeholder="Email" required="required" type="email" value=""></form>

I've created a JSFiddle with a demo.

According to this, a an input field can work perfectly outside a <form> tag.

I've tested it on Firefox, and everything works well.

So why is that?

Community
  • 1
  • 1
Arik
  • 5,266
  • 1
  • 27
  • 26
  • Can you post your code .. May be via jsfiddle or codepen.io .. this will be better than guessing. – hutchbat Jun 12 '14 at 05:30
  • Interesting to note: if you place a word without the `@`in the second input that is wrapped in the form and hit enter, you will get the message "Please include an '@'...". This doesn't occur for the first input. – misterManSam Jun 12 '14 at 06:32

1 Answers1

0

why don't you use autocomplete="off" attribute in input field. This one works fine for me on chrome

<input id="email" label="False" name="email" placeholder="Email" autocomplete="off" required="required" type="email" value="">

Updated Fiddle

chandu
  • 2,276
  • 3
  • 20
  • 35