Using localStorage to select dropdown item?

I am working on a WordPress site with a form created using the Contact Form 7 plugin. The form contains a mailing-address region comprising a mixture of text fields (street, zip code) and dropdowns (state, country). A subsequent billing-address region exists, and is preceded by a “Same as mailing address checkbox.” Using this tutorial, I have succeeded at getting the street & zip-code fields in the mailing-address region to populate the corresponding fields in the billing-address region. However, I have not been able to figure out if it is possible to also have the state & country dropdown selections from the mailing-address section make the corresponding selections in the billing-address section. So, two questions:

1.) Is this possible?
2.) If so, what is the code will accomplish this?

Thanks in advance.

Hi @jonzahlaway, yes you can certainly set the value of a select element too. Could you post the code you have so far?

Thanks for the reply, @m3g4p0p. Here is what I have right now.
The following is the HTML output generated by the form plugin:

<ul>
<li><strong>UPDATED ADDRESS INFORMATION</strong><br />Place of residence where graded work and letters from the school are sent:</span><br />
<br />Street Address<br />
    <span class="wpcf7-form-control-wrap residence-street"><input type="text" name="residence-street" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" /></span> </li>
<li>City<br />
    <span class="wpcf7-form-control-wrap residence-city"><input type="text" name="residence-city" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" /></span> </li>
<li>State<br />
    <span class="wpcf7-form-control-wrap residence-state"><select name="residence-state" class="wpcf7-form-control wpcf7-select" aria-invalid="false"><option value="">---</option><option value="Alabama">Alabama</option><option value="Alaska">Alaska</option><option value="American Samoa">American Samoa</option><option value="Arizona">Arizona</option><option value="Arkansas">Arkansas</option><option value="California">California</option><option value="Colorado">Colorado</option><option value="Connecticut">Connecticut</option><option value="Delaware">Delaware</option><option value="District of Columbia">District of Columbia</option><option value="Florida">Florida</option><option value="Georgia">Georgia</option><option value="Guam">Guam</option><option value="Hawaii">Hawaii</option><option value="Idaho">Idaho</option><option value="Illinois">Illinois</option><option value="Indiana">Indiana</option><option value="Iowa">Iowa</option><option value="Kansas">Kansas</option><option value="Kentucky">Kentucky</option><option value="Louisiana">Louisiana</option><option value="Maine">Maine</option><option value="Maryland">Maryland</option><option value="Massachusetts">Massachusetts</option><option value="Michigan">Michigan</option><option value="Minnesota">Minnesota</option><option value="Mississippi">Mississippi</option><option value="Missouri">Missouri</option><option value="Montana">Montana</option><option value="Nebraska">Nebraska</option><option value="Nevada">Nevada</option><option value="New Hampshire">New Hampshire</option><option value="New Jersey">New Jersey</option><option value="New Mexico">New Mexico</option><option value="New York">New York</option><option value="North Carolina">North Carolina</option><option value="North Dakota">North Dakota</option><option value="Northern Marianas Islands">Northern Marianas Islands</option><option value="Ohio">Ohio</option><option value="Oklahoma">Oklahoma</option><option value="Oregon">Oregon</option><option value="Pennsylvania">Pennsylvania</option><option value="Puerto Rico">Puerto Rico</option><option value="Rhode Island">Rhode Island</option><option value="South Carolina">South Carolina</option><option value="South Dakota">South Dakota</option><option value="Tennessee">Tennessee</option><option value="Texas">Texas</option><option value="Utah">Utah</option><option value="Vermont">Vermont</option><option value="Virginia">Virginia</option><option value="Virgin Islands">Virgin Islands</option><option value="Washington">Washington</option><option value="West Virginia">West Virginia</option><option value="Wisconsin">Wisconsin</option><option value="Wyoming">Wyoming</option></select></span> </li>
</ul>

<input id="target" name="billing" value="This is also my billing address." type="checkbox"> This is also my billing address.

<ul>
<li><strong>Billing Address</strong>:<br />
Street Address<br />
    <span class="wpcf7-form-control-wrap billing-street"><input type="text" name="billing-street" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" /></span> </li>
<li>City<br />
    <span class="wpcf7-form-control-wrap billing-city"><input type="text" name="billing-city" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" /></span> </li>
<li>State<br />
    <span class="wpcf7-form-control-wrap billing-state"><select name="billing-state" class="wpcf7-form-control wpcf7-select" aria-invalid="false"><option value="">---</option><option value="Alabama">Alabama</option><option value="Alaska">Alaska</option><option value="American Samoa">American Samoa</option><option value="Arizona">Arizona</option><option value="Arkansas">Arkansas</option><option value="California">California</option><option value="Colorado">Colorado</option><option value="Connecticut">Connecticut</option><option value="Delaware">Delaware</option><option value="District of Columbia">District of Columbia</option><option value="Florida">Florida</option><option value="Georgia">Georgia</option><option value="Guam">Guam</option><option value="Hawaii">Hawaii</option><option value="Idaho">Idaho</option><option value="Illinois">Illinois</option><option value="Indiana">Indiana</option><option value="Iowa">Iowa</option><option value="Kansas">Kansas</option><option value="Kentucky">Kentucky</option><option value="Louisiana">Louisiana</option><option value="Maine">Maine</option><option value="Maryland">Maryland</option><option value="Massachusetts">Massachusetts</option><option value="Michigan">Michigan</option><option value="Minnesota">Minnesota</option><option value="Mississippi">Mississippi</option><option value="Missouri">Missouri</option><option value="Montana">Montana</option><option value="Nebraska">Nebraska</option><option value="Nevada">Nevada</option><option value="New Hampshire">New Hampshire</option><option value="New Jersey">New Jersey</option><option value="New Mexico">New Mexico</option><option value="New York">New York</option><option value="North Carolina">North Carolina</option><option value="North Dakota">North Dakota</option><option value="Northern Marianas Islands">Northern Marianas Islands</option><option value="Ohio">Ohio</option><option value="Oklahoma">Oklahoma</option><option value="Oregon">Oregon</option><option value="Pennsylvania">Pennsylvania</option><option value="Puerto Rico">Puerto Rico</option><option value="Rhode Island">Rhode Island</option><option value="South Carolina">South Carolina</option><option value="South Dakota">South Dakota</option><option value="Tennessee">Tennessee</option><option value="Texas">Texas</option><option value="Utah">Utah</option><option value="Vermont">Vermont</option><option value="Virginia">Virginia</option><option value="Virgin Islands">Virgin Islands</option><option value="Washington">Washington</option><option value="West Virginia">West Virginia</option><option value="Wisconsin">Wisconsin</option><option value="Wyoming">Wyoming</option></select></span> </li>
</ul>

And this is the javascript I’m trying to use in order to automatically populate the Billing Street, Billing City & Billing State fields when “This is also my billing address” is checked; so far, it’s working only for the Billing Street & Billing City text fields, but not for the Billing State dropdown:

( function( $ ) {
$( 'input[name=billing]' ).click(function() {if($('input[name=billing]').is(':checked')) {
if (localStorage["residence-street"]) {
$('input[name=billing-street]').val(localStorage["residence-street"]);
}
if (localStorage["residence-city"]) {
$('input[name=billing-city]').val(localStorage["residence-city"]);
}
if (localStorage["residence-state"]) {
$('input[name=billing-state]').val(localStorage["residence-state"]);
}
}
});$('.wpcf7-text').change(function () {
localStorage[$(this).attr('name')] = $(this).val();
});$('#wpcf7-f7-p1-o1').submit(function() {
localStorage.clear();
});
} )( jQuery );

You can actually do the same for the select:

if (localStorage["residence-state"]) {
  $('select[name=billing-state]').val(localStorage["residence-state"]);
}

// ...

$('.wpcf7-text, .wpcf7-select').change(function() {
  localStorage[$(this).attr('name')] = $(this).val();
});

BTW, you might avoid hard-coding those local storage checks in the JS by just iterating over the input elements like e.g.

$('[name=billing]').click(function() {
  $('[name^=billing-]').each(function () {
    var key = this.name.replace('billing', 'residence')
    var value = localStorage[key]
      
    if (value) {
     this.value = value
    }
  })
});

Thanks, @m3g4p0p. One more question for you:

I replaced all those local-storage checks with the code you suggested (thank you for that!), and I’m getting a bunch of “missing semicolon” errors; is there someplace where I should be adding one/some?

You should be using a semicolon at the end of every statement.

In this case:

  • at the end of each var line
  • at the end of the value assignment line
  • at the end of the closing parenthesis on line 10

Yep, sorry for the confusion… I switched to writing standard style (sort of) a while back and rely heavily on ASI since. But by all means, use semicolons. :-)

Thank you, @m3g4p0p & @Paul_Wilkins. This worked perfectly. I really appreciate the help.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.