Adding a study site when JavaScript is unavailable

When the support team adds a study site to a provider in Support, we use an autocomplete to help users search for study sites.

The autocomplete works well for quickly selecting a study site, but it requires JavaScript. Not everyone has JavaScript, and it doesn’t always run successfully.

We added a no-JavaScript version of the ‘Add study site’ flow, which we can progressively enhance.

How it works

Selecting ‘Add study site’ on the study sites list page takes the user to a form where they can search for a school, university or college. They do this by entering the study site name, unique reference number (URN) or postcode.

Without JavaScript, when the user continues, we show:

  • the number of results and the search term in the heading - for example, “9 results found for ‘bath’”
  • a way to change the search if the study site they are looking for is not listed or if there are too many results
  • a list of radio options matching their search query - we limit this list to 15 items

We use data provided by Get information about schools (GIAS).

We display the name, town and postcode for each school, university or college in the list. This allows users to choose from similarly named locations correctly.

Selecting a study site from the list allows the user to continue and add the study site.

We show an error message if the user tries to continue without selecting a study site.

If the study site the user is looking for isn’t listed or there aren’t any results, the user can change their search, which takes them back to the initial search form.

Finding a study site - without autocomplete#

Screenshot of Finding a study site - without autocomplete

List of study sites - many results#

Screenshot of List of study sites - many results

List of accredited providers - less than 15 results#

Screenshot of List of accredited providers - less than 15 results

List of accredited providers - one result#

Screenshot of List of accredited providers - one result

No results#

Screenshot of No results

Error message#

Screenshot of Error message