Solved

Chrome Autofill resets any checkboxes and radio buttons on a form

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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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 videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

809 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