Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I have a small question.

How do you gracefully degrade select filters?

Example,

With ajax you might have a State select and then a City select under it that would show the cities of the selected state. The city select would refresh based on the selected state. Then you would have a submit button for when the form needed to be submitted.

But what if there is no javascript? Do you show a "refresh" button whose lone purpose is to update the filters?

share|improve this question
    
I'd question the point of making a city a select field in the first place. –  DA01 Jun 14 '13 at 21:46
    
@DA01, sure but just as an example to make it simple to understand the question. –  Jerry Saravia Jun 15 '13 at 4:26
    
Progressive enhancement is another way of thinking about this and may actually help avoid getting into these kinds of conumdrums. –  Marjan Venema Jun 15 '13 at 9:11

3 Answers 3

Unfortunately, the only option is a form submit after the selection. I would recommend a combo-box with a handy "submit" button nearby. Then the next page would load with a new list based on the user's previous selection. Keep the lists short though. If you need to present a lot of options you may want to consider radio buttons or checkboxes.

I am unsure of which programming language you use to be able to provide you with a code sample. I code in PHP myself. Let me know if I can help out with that.

EDIT: There is always <iframe>... :/

share|improve this answer
    
thanks, php is my main as well. –  Jerry Saravia Jun 15 '13 at 4:27
    
that is a good choice ;) –  Just Plain High Jun 15 '13 at 17:19

Without Javascript you can use following schema:

  1. User enters city (from list or manual enter) and submits
  2. Server checks if there are duplicates.
    If there are, goto page 2
    else
    a) define State
    b) goto page 3

Probably in most cases procedure will take single step (the number of duplicates not so big).

Interaction

share|improve this answer

The attitude of "progressive enhancement" will dictate something along the lines of this:

  1. All options (cities) are available. OR: The City input is free text.
  2. If JS is enabled, JS filters city options or modifies the city input as needed. It can also perform initial validations on the client side.
  3. Server does the validations then page refreshes with highlighted errors if any.
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.