add a dropdown menu for state

Issue #1052 resolved
Tay Ray Chuan
created an issue

I've published this as [[ | 1423:57ef2e3dcc15]].

Whenever the user chooses a country, the state field is re-populated with state choices via some fancy JavaScript.

In the default template, there'a simple "Loading" text indicator that's displayed when we retrieve the state choices. Users can hook onto callbacks that are provided to override this for more fancy stuff.

To use this, make sure that you've turned on ENFORCE_STATE and turned off in_country_only (//"Only sell to in-country customers?"//).

PS. A note on stability: I've been playing around with this for some time, by testing out the generation of state choices and messing the state field in the form data to check validation. So far, it has held out well.

Comments (9)

  1. Chris Moffitt repo owner

    I haven't had a chance to check this out yet. I will hopefully do it in a day or so. The one question I have is how gracefully does it degrade if someone doesn't have javascript or if the ajax calls are delayed?

    I really like the idea, I just want to make sure it will work in a broad range of scenarios.

  2. Tay Ray Chuan reporter

    You've got a point.

    Although I didn't really plan for this scenario, validation and data integrity will still be there. There's just added inconvenience (more submits).

    Without JavaScript, the user will have to first select the country and submit (if it isn't the default country), and the state field will be re-populated with the states for the country that was selected at submit-time. Repeat ad infinitum each time he/she changes the country selection.

    One issue I think is significant would be error messages: on each submit, the user will get a "state isn't valid for this country" error. But I don't really consider this as a stopper.

  3. Tay Ray Chuan reporter
    • changed status to open

    It seems ContactInfoForm is being used in another 2 places. The state fields are rendered as dropdowns but aren't being repopulated, due to missing JavaScript in those templates.

    I'll change those templates to pull in the JavaScript code.

    Chris, do you have any ideas on how to handle the non-JavaScript situation? Perhaps we could use text fields in django, then we use JavaScript to convert it to a dropdown. But this way, we don't get the free "choice-is-in-choices" validation from django.

  4. Chris Moffitt repo owner

    I'm not really sure what the best option is for the non-javascript solution.

    One idea I had was to have a small "refresh" link that the user could push to rebuild the state drop down list if the country changes. Do you think that would work?

  5. Tay Ray Chuan reporter

    Let me try to visualise what you are getting at with ascii art:

    State:      <field>
    Country:     <field>
    Postal code: <field>

    where refresh is the usual <input type="submit"> and submits the form just like [Submit] does, just that it is worded differently.

    If the link could just change the state field without doing a full form submit, then we find ourselves back at the beginning - it requires JavaScript.

  6. Chris Moffitt repo owner

    Good point. As I thought about it some more, I realized that my solution wasn't really a solution.

    Let's go forward with making the templates consistently use javascript. We can include an example in the docs about how to change the template to disable the javascript population if that's what people want their store to do.

  7. Tay Ray Chuan reporter


    I think you might have run into some merge conflicts. Thanks.

    PS. I intended to re-do this patch series on top #1058, so that all contact forms could share the state dropdown feature.

  8. Log in to comment