Question

I want to create a small database, or collection, of items – only about 30 – you can search with JavaScript alone.

For example – let’s say I have 20 houses to rent and I want students to be able to search for them houses with 4 or 5 rooms.

I can create the house objects like this:

function house(address, rooms, bathrooms){
this.address=address;
this.rooms=rooms;
this.bathrooms=bathrooms;
}

var property1 = new house("10 Park Way","4","1");
var property2 = new house("61 Park Avenue", "5","2");
var property3 = new house("585 Park Road", "3", "1");

I want to be able to search this list by “rooms” and display the address, number of rooms and number of bathrooms.

NB: I know the way I’ve written it isn’t an Array but I will use an Array so I can use a for loop to cycle through the properties and evaluate them in the following way:

if(property[i].rooms == roomquery){
    document.write('Address:' + property[i].address + '.<p>');        
    document.write('Address:' + property[i].rooms + '.<p>');
    document.write('Address:' + property[i].bathrooms + '.<p>');
}

Simple eh?

Except I don’t know how to pass the roomquery variable from my form to my script.

The order of the process is: Search Page -> Results Page -> Details Page

The user searches and gets a list of results. There is the option to view the property in more detail on the result page, passing the data from the results to page to be reformatted on a details page. Of course there will be much more data about each property in the Array and I can give this data to the id or value properties of invisible tags for collection and resubmission to a script on the details page.

I know I can do this with PHP, and I know I could do this by sending the roomquery variable to a script on the same page and making the changes on the Search Page.

But what I want to do is send the data, which is just a single number, to a script on the Results Page using GET, or any other method, because that way I can run the search from any page that will send to the Search Page.

I’ve searched the internet for this and I’m not coming up with anything. There must be a way.

Answer 1

Since you are working with a static list of houses entirely on the client side, you can accomplish this on a single page with a small amount of basic Javascript. No form submission required.

1. Set up your basic HTML form, with a place to display the results:

   <form>
       <select name="rooms"></select>
   </form>
   <div id="results"></div>
   

2. Write some javascript to listen for the change event (this example uses jQuery), do a search, and output the results:

   var houses = [/* ... */]
   $('select[name=rooms]').on('change', function () {
       var rooms = $('select[name=rooms]').val();
   
       $('#results').empty();
   
       for (var i = 0; i < houses.length; i++) {
           if (houses[i].rooms == rooms) {
               $('#results').append('<p>Address: ' + houses[i].address + '</p>');
           }
       }
   });
   

You can get a lot fancier and add more structure than this, but that should cover the basics.

If your heart is set on including a page submission, you can retrieve a parameter from the query string by parsing window.location.search. I think it’s a better experience to keep it to one page though.