Extends the CF7 autofill/memory to include select menus and checkboxes #2098

patphg · 2020-12-15T20:38:37Z

Select menu inputs were plug and play.

Checkbox inputs require a different approach but are also simple to add/retrieve.

I did not investigate the "update matching form fields on other windows/tabs" feature as I don't fully understand how it triggers/works...

Select menus were plug and play. Checkboxes were also similarly simple to add/retrieve. I did *not* investigate the "update matching form fields on other windows/tabs" feature as I don't fully understand how it triggers/works.

chrisblakley

Here are my notes

assets/js/nebula.js

patphg · 2020-12-15T22:10:35Z

Hold on for this, I discovered that my local storage entries were cached in, so I need to write a bit more to get them setting properly the initial page visit. I must have had it working at some point or else the entries wouldn't exist to be changed... few more edits I guess.

This reverts commit f7d130f.

patphg · 2020-12-16T00:46:43Z

I went down a whole rabbithole and I'm starting over, so next time I push code take a look at it fresh, basically.

patphg · 2020-12-16T03:14:52Z

This has been rewritten to add checkboxes and radio buttons now. I'll try to explain the general idea of what's happening:

On interaction, radios, text, selects, checkboxes, etc. are stored as their val(), while checkboxes are stored as their value only if they have been checked. Else they are stored as null. (The current method will not work if an input is set to disabled but also selected by default or otherwise contains a value. This might not be a realistic problem but just want to note it.)

To sum it up, on page load, logic happens and radio buttons and checkboxes are set to checked if their val() matches what's stored in data.

Multi-window/multi-tab updating is working for these input types, too. The AJAX submit fail condition is also updated.

This new script removes some .trigger() methods which are no longer needed, and some were causing infinite loops by triggering recurring local storage updates when multiple windows were open. This new code might fix the comment about IE 11 infinite loop? I didn't check into it further.

Finally, this now adds a class .nebula-autofilled to the input if it has been autofilled on page load (but not on cross-window update) which might be useful one day.

chrisblakley

My notes– just minor stuff.

chrisblakley · 2020-12-16T04:45:36Z

assets/js/nebula.js

-				jQuery(this).val(thisLocalStorageVal).trigger('keyup');
+			if ( thisLocalStorageVal !== null ){
+				if ( jQuery(this).attr('type') === 'checkbox' || jQuery(this).attr('type') === 'radio' ){
+					jQuery(this).prop('checked', (jQuery(this).val() === thisLocalStorageVal));


I'm not a huge fan of the conditional within the setting part of this itself. Let's set a variable for that with a comment explanation.

chrisblakley · 2020-12-16T04:46:39Z

assets/js/nebula.js

 		if ( !jQuery(this).hasClass('do-not-store') && !jQuery(this).hasClass('.wpcf7-captchar') && thisLocalStorageVal && thisLocalStorageVal !== 'undefined' && thisLocalStorageVal !== '' ){
-			if ( jQuery(this).val() === '' ){ //Don't overwrite a field that already has text in it!
-				jQuery(this).val(thisLocalStorageVal).trigger('keyup');
+			if ( thisLocalStorageVal !== null ){


We're checking if thisLocalStorageVal is not null, undefined, or an empty string above (line 2734). Is this conditional redundant?

chrisblakley · 2020-12-16T04:47:50Z

assets/js/nebula.js

+			if ( thisLocalStorageVal !== null ){
+				if ( jQuery(this).attr('type') === 'checkbox' || jQuery(this).attr('type') === 'radio' ){
+					jQuery(this).prop('checked', (jQuery(this).val() === thisLocalStorageVal));
+				} else {


I'd love if we could find a way to not need this else... it seems tantalizingly close, but it may be necessary.

chrisblakley · 2020-12-16T04:49:30Z

assets/js/nebula.js

 			if ( !jQuery(this).hasClass('do-not-store') && !jQuery(this).hasClass('.wpcf7-captchar') ){
-				jQuery(this).val(localStorage.getItem('cf7_' + jQuery(this).attr('name'))).trigger('keyup');
+				var thisLocalStorageVal = localStorage.getItem('cf7_' + jQuery(this).attr('name'));				
+				if ( thisLocalStorageVal !== null ){					


Could this simply be:

Suggested change

if ( thisLocalStorageVal !== null ){

if ( thisLocalStorageVal ){

chrisblakley · 2020-12-16T04:50:41Z

assets/js/nebula.js

+				var thisLocalStorageVal = localStorage.getItem('cf7_' + jQuery(this).attr('name'));				
+				if ( thisLocalStorageVal !== null ){					
+					if ( jQuery(this).attr('type') === 'checkbox' || jQuery(this).attr('type') === 'radio' ){
+						jQuery(this).prop('checked', (jQuery(this).val() === thisLocalStorageVal));


Same note as above, let's throw the string to boolean conversion into a variable (with comment explanation) instead of doing it all inline. We're going to forget what this does after a while.

chrisblakley · 2020-12-16T04:51:06Z

assets/js/nebula.js

+					if ( jQuery(this).attr('type') === 'checkbox' || jQuery(this).attr('type') === 'radio' ){
+						jQuery(this).prop('checked', (jQuery(this).val() === thisLocalStorageVal));
+					} else {
+						jQuery(this).val( thisLocalStorageVal );


Just to be consistent with the rest of Nebula:

Suggested change

jQuery(this).val( thisLocalStorageVal );

jQuery(this).val(thisLocalStorageVal);

chrisblakley · 2020-12-16T04:52:32Z

assets/js/nebula.js

 			}
 		});
 	});

 	//Clear localstorage when AJAX submit fails (but submit still succeeds)
 	if ( window.location.hash.indexOf('wpcf7') > 0 ){
 		if ( jQuery(escape(window.location.hash) + ' .wpcf7-mail-sent-ok').length ){
-			jQuery(escape(window.location.hash) + ' .wpcf7-textarea, ' + escape(window.location.hash) + ' .wpcf7-text').each(function(){
+			jQuery(escape(window.location.hash) + ' .wpcf7-textarea, ' + escape(window.location.hash) + ' .wpcf7-text, ' + escape(window.location.hash) + ' .wpcf7-checkbox input, ' + escape(window.location.hash) + ' .wpcf7-radio input, ' + escape(window.location.hash) + ' .wpcf7-select, ').each(function(){


Since we're adding the escape() a bunch, let's set it to a variable above 2780 and then use that variable as needed.

patphg requested a review from chrisblakley as a code owner December 15, 2020 20:38

chrisblakley requested changes Dec 15, 2020

View reviewed changes

Revert "Extends the cf7 autofill to include select menus and checkboxes"

849267b

This reverts commit f7d130f.

Updates to the CF7 local storage autofilling

b6f5431

patphg requested a review from chrisblakley December 16, 2020 03:15

Formatting edits

694eab3

patphg mentioned this pull request Dec 16, 2020

Form localstorage does not store select menus, checkboxes, or other input types #1657

Open

chrisblakley requested changes Dec 16, 2020

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Extends the CF7 autofill/memory to include select menus and checkboxes #2098

Extends the CF7 autofill/memory to include select menus and checkboxes #2098

patphg commented Dec 15, 2020

chrisblakley left a comment

patphg commented Dec 15, 2020

patphg commented Dec 16, 2020

patphg commented Dec 16, 2020 •

edited

chrisblakley left a comment

chrisblakley Dec 16, 2020

chrisblakley Dec 16, 2020

chrisblakley Dec 16, 2020

chrisblakley Dec 16, 2020

chrisblakley Dec 16, 2020

chrisblakley Dec 16, 2020

chrisblakley Dec 16, 2020

	if ( thisLocalStorageVal !== null ){
	if ( thisLocalStorageVal ){

	jQuery(this).val( thisLocalStorageVal );
	jQuery(this).val(thisLocalStorageVal);

Extends the CF7 autofill/memory to include select menus and checkboxes #2098

Are you sure you want to change the base?

Extends the CF7 autofill/memory to include select menus and checkboxes #2098

Conversation

patphg commented Dec 15, 2020

chrisblakley left a comment

Choose a reason for hiding this comment

patphg commented Dec 15, 2020

patphg commented Dec 16, 2020

patphg commented Dec 16, 2020 • edited

chrisblakley left a comment

Choose a reason for hiding this comment

chrisblakley Dec 16, 2020

Choose a reason for hiding this comment

chrisblakley Dec 16, 2020

Choose a reason for hiding this comment

chrisblakley Dec 16, 2020

Choose a reason for hiding this comment

chrisblakley Dec 16, 2020

Choose a reason for hiding this comment

chrisblakley Dec 16, 2020

Choose a reason for hiding this comment

chrisblakley Dec 16, 2020

Choose a reason for hiding this comment

chrisblakley Dec 16, 2020

Choose a reason for hiding this comment

patphg commented Dec 16, 2020 •

edited