Question

I am building a site with a select tag that has all 50 states. I want to be able to have a page generated for each state selected rather than having to write 50 separate pages. Any ideas on how I would accomplish this? Thank you.

Answer 1

You can either load all data on page load, or via ajax, and only show the data for the current state,

or if you have a server side database/data source to pull the data from you could also just have the page deliver data for a specific state, defined by a query/GET variable, the URL would look something like:

http://mysite.com/myPage.aspx?state=ca

or

http://mysite.com/myPage.php?state=az

When the page is requested you can then have your server page populate the correct data for the current state, which would then be sent over to the client.

Generally speaking I would lean toward the server side solution, especially if your visitors will likely only visit a handful of states then there’s no reason to load ALL states data. On the flip side if the data for each state is very minimal it might not make much different either way.

EDIT

I’m not aware of any specific tutorials on the web, but since this encompasses putting a few things together I’ll tell you the topics that might be useful in accomplishing this.

Depending on your level of knowledge of php, or c#, or other chosen language for your server side part, research the following topics:

1. Read a Get variable
2. Switch case statements
3. Add variable value into parts of html, or concatenation of html strings
4. Optionally various database topics, (if you don’t want to hard code
   data into your code)

For example, your server side php page could look something like this (untested code):

<?php
switch($_GET["state"]) {
  case "ca":
    $pageTitle = "California";
    $pageContent = "stuff about CA";
    break;
  case "az":
    $pageTitle = "Arizona";
    $pageContent = "stuff about a really hot state";
    break;
    ...
}

....

echo '<h1>' . $pageTitle . '</h1>' . '<p>' . $pageContent . '</p>'; 

?>

Along with that you’d want to handle when the visitor selects a different state, and upon selection of a state load the correct page. With jQuery you could do something with the change() method.

in your html body declare you drop down list (select input) with id=”stateSelectDropDown”, then in your javascript (untested code):

<script type="text/javascript">
  $(function() {
    $("#stateSelectDropDown").change(funciton() {
      window.location = "nameOfThisPage.php?state=" + $(this).val();
    });
  }
</script>

I apologize for any typos or bad syntax, I hope this points you in the right direction.