Solved

Chrome Autofill resets any checkboxes and radio buttons on a form

Posted on 2013-05-28
5
1,108 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

708 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now