Using Javascript on Address Fields in Collections

asked on December 5, 2019 • Show version history

I have an address field in a collection that I currently have the Country defaulted to USA and a list available for the State. However, when I add another address field in the collection the script doesn't continue with the added address. I have tried some of the script I've seen on similar postings but to no avail.

Here is the script I am using, please tell me how to modify it for collections.

$(document).ready (function () {
  
  $(".Country").parent().children().val("USA");
  
  $(".State").attr("maxlength", 2);
    $(".State").each(function(){
      var id = $(this).attr("id");
      $(this).replaceWith('<select id="'+id+'" name="'+id+'" class="form-item-field State"> ' +
      '<option></option>' +
      '<option value=""></option>' +                      
      '<option value="AL">Alabama</option>' +
      '<option value="AK">Alaska</option>' +
      '<option value="AR">Arkansas</option>' +
      '<option value="AZ">Arizona</option>' +
      '<option value="CA">California</option>' +
      '<option value="CO">Colorado</option>' +
      '<option value="CT">Connecticut</option>' +
      '<option value="DE">Deleware</option>' +
      '<option value="FL">Florida</option>' +
      '<option value="GA">Georgia</option>' +
      '<option value="HI">Hawaii</option>' +
      '<option value="ID">Idaho</option>' +
      '<option value="IL">Illinois</option>' +
      '<option value="IN">Indiana</option>' +
      '<option value="IA">Iowa</option>' +
      '<option value="KS">Kansas</option>' +
      '<option value="KY">Kentucky</option>' +
      '<option value="LA">Louisiana</option>' +
      '<option value="ME">Maine</option>' +
      '<option value="MD">Maryland</option>' +
      '<option value="MA">Massachusetts</option>' +
      '<option value="MI">Michigan</option>' +
      '<option value="MN">Minnesota</option>' +
      '<option value="MS">Mississippi</option>' +
      '<option value="MO">Missouri</option>' +
      '<option value="MT">Montana</option>' +
      '<option value="NE">Nebraska</option>' +
      '<option value="NV">Nevada</option>' +
      '<option value="NH">New Hampshire</option>' +
      '<option value="NJ">New Jersey</option>' +
      '<option value="NM">New Mexico</option>' +
      '<option value="NY">New York</option>' +
      '<option value="NC">North Carolina</option>' +
      '<option value="ND">North Dakota</option>' +
      '<option value="OH">Ohio</option>' +
      '<option value="OK">Oklahoma</option>' +
      '<option value="OR">Oregon</option>' +
      '<option value="PA">Pennsylvania</option>' +
      '<option value="RI">Rhode Island</option>' +
      '<option value="SC">South Carolina</option>' +
      '<option value="SD">South Dakota</option>' +
      '<option value="TN">Tennessee</option>' +
      '<option value="TX">Texas</option>' +
      '<option value="UT">Utah</option>' +
      '<option value="VT">Vermont</option>' +
      '<option value="VA">Virginia</option>' +
      '<option value="WA">Washington</option>' +
      '<option value="WV">West Virginia</option>' +
      '<option value="WI">Wisconsin</option>' +
      '<option value="WY">Wyoming</option>' +
      '<option value="AS">American Samoa</option>' +
      '<option value="DC">District of Columbia</option>' +
      '<option value="PR">Puerto Rico</option>' +
      '<option value="VI">Virgin Islands</option>' +
      '</select>');
    });
  
})

0 0

SELECTED ANSWER

replied on December 5, 2019

The problem you're having is that the code you have above only runs once when the form first loads, which means it only works on the fields that exist at that time.

When you add a new address to the collection, that is a new element being added to the form that will still have all of the default values/configuration.

In order to also update those with your code, you would need to re-run it on the added sections.

One way to do this is to move it into its own standalone function and call that function any time a user clicks the "add" link on the collection.

Honestly, this is one of the reasons I don't like the built-in address field. If you were using separate fields you could set the defaults and the drop down options without any custom code.

Also, have you tested this on a submission? I'd be concerned that the value for State is not going to be captured because your using a custom select instead of the input field Forms would normally be tracking.

0 0

replied on December 5, 2019

Jason,

Thank you, this is very helpful. I think I will just break it up into separate fields. That makes more sense to me than trying to figure out complex JavaScript to do a simple task.

0 0

Question

Question

Using Javascript on Address Fields in Collections

Answer

Replies

Sign in to reply to this post.