Dynamic Input Box

[raamay]

I have often seen in various sites where if we select a state in US from a dropdown list, a dynamic input box for postal code is displayed in the form for entering the postal code. How is this achieved? I feel it is done using AJAX but i also would like to know how AJAX works if javascript is disabled in the client's browser. A link to a good tutorials how to achieve this whole process would be a great help.

[Dormilich]

@raamay
not at all.

maybe the programmer wrote a fallback routine using page reloads.

[raamay]

your help is always appreciated?

[Dormilich]

in what respect? I'm not familiar with postal codes and haven't yet programmed a dynamic drop down box (personally I'd try to google the solution, since it is often done).

I can help you regarding fallback routines (that stuff I have done). further I can tell you to have a look at the Javascript code of those sites, they may give you a hint how to start (though most of the code should be standard AJAX procedure). Even the Javascript Frameworks offer easy-to-use AJAX (helper) functions, so you might have a look there.

[raamay]

i did google the topic but could not find one. so i thought to get a help. Anyway i will see to it. Again thankyou.

[Atli]

@raamay
There are several ways to achieve something like that, but the simplest way would probably be to just create a JavaScript array of possible values and have the onchange event of the <select> box swap out the postal-code value.

Using AJAX isn't really necessary when dealing with static data like that. At least not when it's a relatively small amount of data.

No JavaScript / AJAX solution will work if the client elects no to allow JavaScript, obviously.

[raamay]

I am in a bit of a puzzled state because some says it wont work while some says it will work irrespective of javascript enabled or disabled in the client's browser. So which one is true.

And Mr Atli, i need your guide to perform the operation as you said using javascript. But i am quite against the idea of using javascript because again if the script is disabled in the client it may loose the purpose and i dont want it to happen. So, how to go about in this case?

[TheServant]

To answer your first question I think a recap of programming languages is required:
PHP is server side, so once sent it cannot change any page content.
Javascript is client side which can change content (and display of content) after the pages has been sent.
AJAX is basically javascript that can access the server.
Any javascript code must be wrapped in a <script type="text/javascript> tag or else it will not be treated as javascript and therefore not work. If you turn off javascript from your browser, it effectively ignores any code found in those tags.

The only other common way that I know how to dynamically change display of content is via CSS pseudo-classes (like hover). I have not found one for select, but there might be one. You could have in your css:

input.dynamic_input { display: none; }
form:hover input.dynamic_input { display: block; }

This too is shakey because css is not designed for this and so in this example, your input MUST be within your form tag. You will also need an extra file in the folder that your stylesheet is kept. If you're interested in the hover class, google: csshover3.htc

Long story short, you need to decide if the ~5% of users are worthwhile enough to not use javascript, and work hard to have a nice page with no necessary javascript, or if you can live with slightly fewer visitors and no mobile phone access, to make a javascript required site.