50 States Drop-Down in Address Field

Feature Requests
, ,
1

Request: Change the pre-built address field so that it includes a US/Can states and provinces drop down, down menu in the combined address field that Knack users must make use of if they want their entries to show up on maps.

Problem: In Knack, if you want your records to show up on a map (mutliple pins on a map showing record locations) you must use Knack's pre-assembled address field. (You can't build your own set of address, state, country fields. The map app won't pick those up.) Users have no control over how the pre-assembled address field is built. ---> Within this pre-assembled map field the Region/Province (i.e. state) field is a simple text box not a drop down menu of state or provinces.


PROBLEM THIS CAUSES: We have public users entering addresses from a front end interface into this address field as we build a busineses directory. They enter states/provinces into that address text box in too many different ways. Examples: Florida, FL, FL. , FLA, FLa, fla FLORIDA (not to mention accidental mistakes of misspelling).

CURRENT RESULT: When someone searches the database by "state/province" they will only pull up businesses whose owners have entered state/provinces the same way, If a person searches for business by "Florida", no businesses with "FL" in the state field, or "fla" will show up.

Offering a drop down menu of states/provinces completely eliminates this problem and makes entry faster for the user. Since states/and provinces don't change it doesn't seem like locking users into a drop down of US states, and/or states and provinces is a problem.

IMPLEMENTATION: See attached screnshot.

I suggest adding a check box option, in the already existing dropdown where we are asked about international vs U.S. addresses. I would add
a.) US w/ States Dropdown

b.) States+Provinces Dropdown

c.) U.S (already exists)

d.) International (already exists)

e.) International (with country) (already exists)

When a users selects option (a) or (b) the address field implements a drop down of states or states/provinces rather than a text box for the Region/PRovince field.

2

I'll cast my YES vote for this feature request.

3
Hello Brian,

How good are you with javascript? You can duplicated javascript code that add state drop down, and also need to add javascript event handler to show hide appropriate drop down according to selected region.

with regards,
Raju

4

This is great, thanks Raju!

I need to make this specific to the US Address field, as I have another address field for International where the US states don't apply and Province is displayed . The two addresses are on the same page and are controlled dynamically via form display rules, so it is not page-specific.


2016-06-23_09-23-57.png?1466699509518×767


I'd prefer not to split up the form into multiple views. Ideally, I'd like to limit the states to those within the selected region to further validate proper input.

How can I go about this?

5

Hi Jeff


Spot on, works like a charm, I was changing it and should have just left it alone!


I am in the UK and am using it for counties.


Not as good as being able to validate / force an entry on each field and letting the user add to each dropdown as described above but certainly a good workaround.


Thanks for your time, willingness to help and education.

6

Hi John,


Make sure you copy the code from the second time Raju posted it, there were some terminators missing from the first time.


Also, you shouldn't need to change anything, just copy the JS and CSS directly as they are listed. The 

$(document).on('knack-view-render.any'
               , function(event, view, data)

will force the State Selector dropdown any place it shows up in your app. If you want it only to appear on certain pages, let me know, and I can help talk you through it. Most use cases desire it to be changed in every instance, though, so it should be pretty straightforward.


Let me know if you try this and still can't get it, I'll try to help further.


Jeff

7

Hi, I know this post was a year ago but I could do with some help please.


I am trying to set up a drop down for an address field as outlined above, I have copied the code as above both CSS & Javascript. Can I confirm all I need to do is fill in the Scene, View and Field thus: scene_1043

view_1817

field_389


And it should work yes? All I get is the little old spinning wheel!


Any ideas?

8

It's much later, but just stumbled upon this again, and wanted to say 'thanks! it works!'

9

Also, add following CSS code under API/Code> CSS, to made dropdown array invisible to allow state code visible completely.


/*-----------CSS Fix----------*/

select#slstate::-ms-expand {display: none;}

select#slstate{

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

}

/*---------------CSS Fix end ---------*/

10

Jeff, thanks for noticing the error. I missed line terminators during copying of the javascript code.

here goes it again.

/*-------------------script start --------------------------*/

$(document).on('knack-view-render.any'

, function(event, view, data) {

//adding state dropdown

var sl = $('<select id=slstate style="width:38px"><option value=""></option><option value=AK>AK</option><option value=AL>AL</option><option value=AR>AR</option><option value=AZ>AZ</option><option value=CA>CA</option><option value=CO>CO</option><option value=CT>CT</option><option value=DE>DE</option><option value=FL>FL</option><option value=GA>GA</option><option value=HI>HI</option><option value=IA>IA</option><option value=ID>ID</option><option value=IL>IL</option><option value=IN>IN</option><option value=KS>KS</option><option value=KY>KY</option><option value=LA>LA</option><option value=MA>MA</option><option value=MD>MD</option><option value=ME>ME</option><option value=MI>MI</option><option value=MN>MN</option><option value=MO>MO</option><option value=MS>MS</option><option value=MT>MT</option><option value=NC>NC</option><option value=ND>ND</option><option value=NE>NE</option><option value=NH>NH</option><option value=NJ>NJ</option><option value=NM>NM</option><option value=NV>NV</option><option value=NY>NY</option><option value=OH>OH</option><option value=OK>OK</option><option value=OR>OR</option><option value=PA>PA</option><option value=RI>RI</option><option value=SC>SC</option><option value=SD>SD</option><option value=TN>TN</option><option value=TX>TX</option><option value=UT>UT</option><option value=VA>VA</option><option value=VT>VT</option><option value=WA>WA</option><option value=WI>WI</option><option value=WV>WV</option><option value=WY>WY</option></select>').on('change',function(){Knack.$('input#state').val(this.value);});

var tsl = $('#'+view.key + ' input#state');

sl.val(tsl.val());

tsl.hide().after(sl);

});

/*-------script end--------------*/

11

Hi Raju,

Thanks for solving this -- unfortunately it doesn't work for me. I add the code, but it breaks my app. The bar across the top of the screen with the App name loads, but nothing loads below it.

I don't know much about javascript, but I'm happy to help troubleshoot if you can talk me through it so other people don't run into the same issue.

Jeff

12

Hi,

I achieve this with javascript manipulation.

Call following script under API/Code> Javascript

/*-------------------script start --------------------------*/

$(document).on('knack-view-render.any'

, function(event, view, data) {

//adding state dropdown

var sl = $('<select id=slstate style="width:38px"><option value=""></option><option value=AK>AK</option><option value=AL>AL</option><option value=AR>AR</option><option value=AZ>AZ</option><option value=CA>CA</option><option value=CO>CO</option><option value=CT>CT</option><option value=DE>DE</option><option value=FL>FL</option><option value=GA>GA</option><option value=HI>HI</option><option value=IA>IA</option><option value=ID>ID</option><option value=IL>IL</option><option value=IN>IN</option><option value=KS>KS</option><option value=KY>KY</option><option value=LA>LA</option><option value=MA>MA</option><option value=MD>MD</option><option value=ME>ME</option><option value=MI>MI</option><option value=MN>MN</option><option value=MO>MO</option><option value=MS>MS</option><option value=MT>MT</option><option value=NC>NC</option><option value=ND>ND</option><option value=NE>NE</option><option value=NH>NH</option><option value=NJ>NJ</option><option value=NM>NM</option><option value=NV>NV</option><option value=NY>NY</option><option value=OH>OH</option><option value=OK>OK</option><option value=OR>OR</option><option value=PA>PA</option><option value=RI>RI</option><option value=SC>SC</option><option value=SD>SD</option><option value=TN>TN</option><option value=TX>TX</option><option value=UT>UT</option><option value=VA>VA</option><option value=VT>VT</option><option value=WA>WA</option><option value=WI>WI</option><option value=WV>WV</option><option value=WY>WY</option></select>').on('change',function(){Knack.$('input#state').val(this.value);});

var tsl = $('#'+view.key + ' input#state');

sl.val(tsl.val());

tsl.hide().after(sl);

}

/*-------script end--------------*/

13

BUMP - I have added an updated solution here: State Dropdown in Address Field - API & Customization - Knack Community Forum

1 Like