I have a site with a checkout page that has always worked beautifully.
Recently, any customer that uses autofill to fill out his info, gets his email address dumped into the company field.
There are no changes that we did that could affect that.
What other tools can I use to get to the bottom of this?
The OP's problem may have been solved (or may have come back again in recent updates!) but as of early 2019, you can diagnose some of these problems by setting the show-autofill-type-predictions flag in chrome://flags, restarting Chrome, then looking at the title (tooltip text) for the input in question. It will tell you what information is being used to guess the "type" of field, and what kind of saved data should be used to populate it.
We still don't know what caused the issue, but for anyone seeing this we ended up making the field readonly so that auto-fill doesn't fill it. We then wrote some JS that on focus, it becomes active and the user can manually fill it in.
<input type="text" name="company" readonly="" onfocus="this.removeAttribute('readonly');">
Found myself in a similar problem, and the autocomplete property is what to be used in this situations
<input type="text" name="fooBar" autocomplete="organization" >
exhaustive list of autocomplete/autofill tags for html form inputs
I encountered a similar problem, having a "company" field placed under a "name" field. That company field was auto-filled with a birth year.
It came from another form on the same site that was displaying a "birthdate" field group just below the "name" field. So chrome stored its auto-fill values in that order.
I ended up with changing my second form field order (sadly it was the best I could do).
You need to add name to the input tag. Browsers use name to identify what info is supposed to go into the field. You can also use the same for ID and for placeholder if you like.
Try this:
<input type="text" name="company" id="company" placeholder="company">
If that still does not work, you might consider turning off autofill for that particular field*:
<input type="text" name="company" id="company" placeholder="company" autocomplete="off">
*you can also turn off autofill for the whole form using the same autocomplete property and off value.
We recently started having an issue like this with our shopping cart page when it was viewed from chrome and you had a saved user name and password for the site. Chrome would inexplicably put the user name value into the quantity box. After much hair-pulling, we realized that there were a hidden user name and password field on the page. These auto-filled correctly when visible. When hidden chrome would auto-fill the quantity input box. By setting autocomplete="username" and autocomplete="current-password" on these controls the issue went away.
The Almost Invisible Input Proxy Trick
I just encountered the same issue with the Chrome 72... It just wanted to fill any kind of field (select or input) as long it was not readonly (with complete no respect for name, autocomplete, etc attributes), with any kind of value it may have stored previously.
You may want to avoid the field to be populated because you listen on the change event or there are some validation on input that may trigger error message just because of bad autofill.
You just want the autofill value to be discarded and not even show (even before javascript execution).
You just provide another field for the browser to fill and you make it almost impossible to see by hiding it under the other field.
<input type="text" id="autofill-if-you-dare" style="position: absolute; z-index: -1; top: 20px; width: 0; height:0" />
Note: You can still hide or remove it by javascript afterwards but you should not hide it before autofilling has been completed, because Chrome will populate only visible fields. And as other answers have stated, it doesn't trigger any event, so you must rely on polling to do so.
I had the problem that chrome will fill in my email in all fields in one of my forms. The other form works correctly.
I found the problem is that the word Name must be before the name input. Or the word email must be before input for email. I had it afterwards. Also using <label for="email">Your email</label> after the email input worked.
**Incorrect autocomplete:**
<input type="text" name="name"/> Your name
<input type="email" name="email"/> Your email
**Correct autocomplete:**
Your name <input type="text" name="name"/>
Your email <input type="email" name="email"/>
or
<label for="name">Your name</label> <input type="text" name="name"/>
<label for="email">Your email</label> <input type="email" name="email"/>
or
<input type="text" name="name"/> <label for="name">Your name</label>
<input type="email" name="email"/> <label for="email">Your email</label>
I solved this problem by making sure the section I was adding was actually wrapped in a <form> tag. The site's global "search" field was being considered part of the page's form because neither had a <form> tag.
Since you can have inputs outside of forms, and this isn't really a big problem for a single-page-app (maybe not the best practice though!), this might be a worthwhile thing to check.
February 2021:
autocomplete="__away" worked for me src.
autocomplete="new-password" also worked src.
Still hacky but it worked for me in Chrome and MS Edge both 88.0.7.
Related(Duplicate?) questions:
Autocomplete Off is completely Ignored
Disabling Chrome Autofill
Autocomplete off vs false?
I have been encountering this issue lately, specifically with chrome. It seems that
autocomplete="off"
isnt being picked up anymore by Chrome. I found the following sources helpful :
Chromium (which i believe is what a lot of Chrome is based on) has the following code that shows the regex that is used when finding fields to populate with Chrome's autocomplete:
https://cs.chromium.org/chromium/src/components/autofill/core/common/autofill_regex_constants.cc?sq=package:chromium&g=0&l=262
I feel like they only other work around that I have found is to follow these conventions :
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
Or at least make sure that you give an attribute that's disimilar enough from the above list so it that wont get picked up by autocomplete features.
Suppose there are three fields, One with wrong autocomplete.
<input type="text" name="field1"/>
<input type="password" name="field2"/>
<input type="text" name="wrongAutocompleteField3"/>
Now make display of wrongAutocompleteField3 as none:
<style>
.d-none{
display:none;
}
</style>
....
<input type="text" name="wrongAutocompleteField3" class="d-none"/>
On page load remove this .d-none class:
<script>
$(function(){
$('[name="wrongAutocompleteField3"]').removeClass('d-none');
});
</script>
In Chrome, add this on the top of the page:
<input id="" class="" name="" type="password" style="display: none;">
You need to add form tag
<form action="#" method="GET">
<input type="text" name="text"/>
</form>
<H1 align="center">ID Lookup</H1>
<FORM ACTION="index.jsp" METHOD="POST">
<H3 ALIGN="center">Please enter your User ID:</H3>
<INPUT TYPE="TEXT" NAME="userIDTextBox">
<br>
<br>
<INPUT TYPE="SUBMIT" value="Submit">
<%
String userID = request.getParameter("userIDTextBox");
%>
</FORM>
I'm a beginner and this is my form on my jsp page. What I want to do is have the form disappear after submitting. Can anyone help me please? Or give some tips?
Give your form an ID, then use a javascript command to get your form element and set its visibility.
var myform = document.getElementById('myForm');
myform.style.visibility="hidden";
Now you just need to handle a javascript event and run that.
After Reading your requirement all I understand is you are trying to read parameter "userIDTextBox" from one page and need to display the value to some other page. And You are trying to achieve the same in one page.
Rather have two separate pages..
First with Form and required text field
Other to display the value
Define servlet and servlet-mapping configuration in web.xml
That is the valid way to do it. Hope it may help
I'm having a bit of trouble with my form submission, and I'm afraid I need some advice.
I have a form where I want a user to submit some text, and when they press submit it will take them to an action page where the input will be processed. I wrote some code, only to figure out when I test it in Dreamweaver the submit button isn't working correctly.
Code looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<title>Test Page</title>
</head>
<cfinclude template="head.cfm">
<cfform name="select_action" action="testaction.cfm" method="post">
Enter some text here
<input type="text" size="50" value="Enter some text here" maxlength="150" name="someText"><br>
<INPUT TYPE="RESET" NAME="reset" VALUE="Reset Form">
<INPUT TYPE="SUBMIT" NAME="submit" VALUE="Submit Form">
</cfform>
<cfinclude template="foot.cfm">
I have Dreamweaver correctly configured for testing, because I can reset the form and it shows up properly etc. Just the submit button doesn't take me to anywhere.
I feel that there's something extremely obvious I'm missing, any advice?
Thanks for your time,
Jordan
While testing in Dreamweaver may seem like a good idea, I haven't found it helpful at all. You should have your page open in several browsers at once, such as Firefox and Chrome. Test the behavior of your pages in real browsers, not Dreamweaver.
Also, I would use CFFORM only if you need CFFORM. From the looks of your elements, you don't need it.
I'm trying to set up a form in jqtouch with several pages. Basically the user will answer couple questions, go to the next page, answer couple more questions and submit. But Jqtouch doesnt work if I set up one form and put the pages inside of the form tags. Any suggestion how can I solve this problem?
I had the same problem. You're probably using a type of master page to do this, try do pages with form tag like you page tag, eg:
<form id="home" class="current">
<div class="toolbar">
<h1>Title</h1>
<a class="back hidden" id="btBack" runat="server">Back</a>
</div>
<ul>
...
</ul>
</form>
I am trying to build an facebook-iframe application, where you can select friends to send them some information.
So i build a form method="post", put in some input fields, and a friend selector.
The fb:friend input field is renderd .. works fine.. but it doesn't pass over the selected friends.
Do i have to fix it by javascript?
Is there a simpler solution?
thx sven
Code:
<form action="http://xxx.net/index.php" method="post" target="_top">
<input id="sometext" name="sometext" type="text" size="30" maxlength="30">
<br/>
<fb:serverFbml>
<script type="text/fbml">
<fb:fbml>
<fb:friend-selector uid="$user" name="$user" idname="friendselector"/>
</fb:fbml>
</script>
</fb:serverFbml><input type="submit" name="submit" value="Send">
</form>
Actually, to my knowledge you can't fix it with Javascript.
I need more details (!), but it sounds like you may be attempting to use the FBML implementation of fb-friend-selector, without fb-request-form.
If so, try this: https://developers.facebook.com/docs/reference/fbml/request-form/
(!) Can you post your HTML code here? It's likely an implementation issue that we can figure out through your code.
Ok, i am not alone, so here is an other way to cope with it.
Facebook-like styled Multifriendselector.
http://mike.brevoort.com/2010/08/10/introducing-the-jquery-facebook-multi-friend-selector-plugin/