Solved

Chrome Autofill resets any checkboxes and radio buttons on a form

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
HTTPS jquery doesn't work 9 58
Changing way home page shows 2 29
How can I implement a "Select All" with this configuration...? 6 39
Hide cell in a table 2 9
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

786 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