Solved

Chrome Autofill resets any checkboxes and radio buttons on a form

Posted on 2013-05-28
5
1,190 Views
Last Modified: 2013-08-13
I have created a simple checkout form for an ecommerce website. As you would expect it requests address details. The form also has a checkbox to add to mailing list which is defaulted to checked and a radio button set to indicate if you wish to deliver to your billing address or a new address. The radio selection defaults to the billing address.

When you visit the page with Google Chrome Autofill enabled, it will detect any name and address you have entered previously and correctly perform the Autofill. The problem is that it always resets the checkox and radio button selections so the checkbox is unticked and the radio buttons are not selected.

I use JQuery and tried triggering when the checkbox or radio buttons have changed but JQuery is unable to detect these changes as presumably Autofill bypasses the DOM in some way.

I know by using autocomplete="off" would do the trick but I don't want to remove this option for customers as it does save time.

I have also tried giving the form names random non obvious names but this does not stop Autocomplete.

At this moment in time I cannot see any other solution other than to disable autocomplete.
0
Comment
Question by:mike99c
  • 2
  • 2
5 Comments
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39203736
Post your url
0
 

Author Comment

by:mike99c
ID: 39203787
I have created a standalone static page of the checkout and stripped off all styling so you only see the raw HTML.

http://www.sysorange.com/autofill.htm

Notice the following states:

Mailing list checkbox is ticked
Deliver to radio selection defaults to billing
Payment method defaults to credit card/PayPal

When you have chrome Autofill fill in the saved details it will reset the checkbox and radio buttons.
0
 
LVL 6

Expert Comment

by:lightspeedvt
ID: 39282829
You need to use setInterval function and check if needed radio button is checked. At the same time you need to check if block with additional fields already appeared.

Just add this JS code into the jQuery function initialization:
						setInterval(function() {
							if($("#checkout-delivery-edit").css('display') === 'none' && $('input:radio[name=DeliveryOption]:checked').val() === 'different'){
								$('input:radio[name=DeliveryOption][value=different]').change();
							}
							
						}, 200);

Open in new window


So, JS code with your existing code will be:
                  <script type="text/javascript">
					//<![CDATA[
					$(function() {
					
					  $("#checkout-delivery-edit").hide();
					  
					  $(".deliveryradioselect").change(function() {
								  
						var val = $('input:radio[name=DeliveryOption]:checked').val(); 
						if (val=="different") {
							$("#checkout-delivery-edit").show();
						   } else {
							$("#checkout-delivery-edit").hide();
						}				
						
						//alert(val);
					  });
					  
					  
						setInterval(function() {
							if($("#checkout-delivery-edit").css('display') === 'none' && $('input:radio[name=DeliveryOption]:checked').val() === 'different'){
								$('input:radio[name=DeliveryOption][value=different]').change();
							}
							
						}, 200);
					  
					});
					//]]>
				  </script>

Open in new window


Here is demo:
http://jsbin.com/ukihog/1/edit
0
 

Author Comment

by:mike99c
ID: 39284481
Hi lightspeedvt, your demo page gives a 503 error, can you please post it again or insert the full code here?
0
 
LVL 6

Accepted Solution

by:
lightspeedvt earned 500 total points
ID: 39284569
Hello. It gives error because that is only demo and is not placed at your server. But when you got 503 error page just do history back at browser and you will get the situation with autofills. You have to place those javascript code to the page at your server, so you will be able to do complete testings.
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
alert on input text 2 23
Adding 1 the value of input "text" every 3 seconds 5 32
Use "if not" in a condition 2 18
Jquery HTML() with ajax... replacing content 2 26
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

679 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question