• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1349
  • Last Modified:

Chrome Autofill resets any checkboxes and radio buttons on a form

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
mike99c
Asked:
mike99c
  • 2
  • 2
1 Solution
 
Jagadishwor DulalBraces MediaCommented:
Post your url
0
 
mike99cAuthor Commented:
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
 
lightspeedvtCommented:
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
 
mike99cAuthor Commented:
Hi lightspeedvt, your demo page gives a 503 error, can you please post it again or insert the full code here?
0
 
lightspeedvtCommented:
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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now