7 replies to this topic

[steph03]

Hello, I am new to this forum.

I have a question about dynamically populating multiple dependant drop-down boxes in a form.

I have 3 location drop-down boxes. The first is the State, then Zone, then City. When the user selects a State, the Zones should populate on the spot, and when a zone is selected, the Cities drop-down is also populated the same way.

I would like to know if there is a way of refreshing only that part of the page, without refreshing the entire page. If possible, without using AJAX (I'm not familiar at all with AJAX).

Thank you very much in advance for your replies,

Steph

[amrosama]

yes , in fact theres more than one way
simplest one is changing the innerHTML of "zone", "city" with the appropriate values when 'state" list is changed.
example:

<select id='state' onchange="loadzone()">

<option value='1'>state one</option>

<option value='2'>state two</option>

</select>

<select id='zone'></select>

<script type='text/javascript'>

function loadzone(){

if(state.value==1){

zone.innerHTML="<option>state 1 zone 1</option><option>state 1 zone 2</option>";

}else if(state.value==2){

zone.innerHTML="<option>state 2 zone 1</option><option>state 2 zone 2</option>";

}

}

</script>

this isnt a perfect way but it works, you may also want to store them in arrays

[steph03]

Thanks for the reply Amrosama!

That's actually how we are doing it right now. We have all the data in a huge array. Out of about 50 states, there's maybe 5-6zones each, and each zone has at least 15-20 cities. Creating the array on page load takes forever. It works perfectly, but the kills the load performance. Plus, we don't want users to see the array of cities if the decide to look up the source code.

We would like to find a way of refreshing that part of the page on the onChange() event of the drop-down boxes, but without using AJAX if possible, without refreshing the whole page.

[WingedPanther]

No AJAX and no refesh means the data is in the page, somehow. You may have it obfuscated, but it's there and anyone who wants to can dig into it.

[amrosama]

theres one solution but i dont know if it will work well,
store the arrays or "option" elements in separate HTML pages, and when the listbox value changes, open a dummy window with the appropriate address to the page that contains the array or option "elements" to use it's innerhtml to fill your content.
ofcourse ajax would be much more easier

[steph03]

Ok, I'll give it a try, thanks so much for the help.

If anything, I'll read up on AJAX :cursing:

Thanks again!

[chili5]

You might as well read up on ajax. It isn't that tricky. You might even be able to find code online that does what you want.

I use the attached file to load a new PHP page into a div when the user clicks on a link. You could probably use it in your onChange event or however you want to use it.

Ex.

<li><a href="javascript:ajaxpage('links.php?id=20','links')">ActionScript</a></li>

This loads the file links.php?id=20 into the links div when the link is clicked. That might be similar to what you are looking for?

Attached Files

•  ajax.js   2.27K   103 downloads

[steph03]

Hey guys, thanks for all the replies!
I finally learned AJAX. You're right, not too tricky, and it's amazing to use. Thanks again