window.location and multiple select boxes

[padanaram]

I have a form that has 4 select boxes on it. I am able to use window.location to reload the page and then use php to populate the second select box with the options that are relevent to the first select box.

I also have a select box that is a fromYear and another select box that is a toYear. The user would use this form to select make, model and year ranges of a car that they are looking for.

When the user chooses the make of the car and window.location which is javaScript produces a url such as the following:

vehicleSearch.php?search=basic&make_id=HONDA

I also need the url to include the selected fromYear and toYear. I need the url that is produced to be much like the following.

vehicleSearch.php?search=basic&make_id=HONDA&fromYear=1998&toYear=2008

How do I do this?

Here is the javascript that I am using to reload the page with.

<select name="make_id" onchange="window.location='vehicleSearch.php?search=basic&make_id='+make_id[selectedIndex].value">

If you have a function that will do this or any suggestions it would be appreciated.

[etully]

Four solutions:

1. Write a Javascript function so that just before you do your window.location, your check the value of all the fields and assemble the URL just as you described.

2. Change the "window.location" command to "form.submit" so that the form actually gets posted to the server. To make it so that the server knows that this post is just to update a select box (and not perform an actual search) make a hidden field called "just_updating" or something like that. Change the "onChange" command of the first select box to change the value of the just_updating field to "1" so that when the server hears the post, it knows that the user got there by changing a select field, not pressing the submit button. (Another technique for doing this is to use the field's onChange event to change the Form's action to point to another URL instead.)

3. Use Ajax instead of window.location or form.submit. This way, the page never refreshes so it updates faster. The field's onChange event should trigger a function that (A) goes out to the Internet, (B) posts the make, the toYear, and the fromYear, (C) finds out what the possible options are for the second select field, and (D) updates the contents of the 2nd select field.

4. Depending on how many Makes and Models you have, you could think about doing the whole thing in Javascript. Write a function that has a big array that keeps track of all the different cars and toYear and fromYear information. When a user changes the first select field, the onChange event triggers this function that looks at all the relevent fields in your form and populates the second select field accordingly.

Personally, Option 3 is my favorite, Option 4 is almost as good but it's not always practical, then Option 2 and as a very last resort, I'd use Option 1 if I had no other choice.