The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Disabling fields based on user input

Hi,

I've searched high and low for this and since my JS skills are laughable I'm not 100&#37; sure on how to write it myself. Basically, here's what I'm trying to achieve...

I have a form with several fields. All should be enabled initially. But some are dependent on others. So for those, if a particular field is filled out, another field should become disabled (or readonly). In other words, if one filled in it means that another is not available.

Ideally I'd also like to be able to set the text related to that field to a different color too (which I'm guessing can be done with getElementById).

Note that it is gen.nextSibling.nextSibling and not just gen.nextSibling. This is because the next sibling is a text node of whitespace (spaces or newlines), so we want the one after this. This is just one way to "walk the DOM". You could use document.getElementById for both of them for example. This would probably be sensible as it would make your script more robust. Still, this is simply an illustration of walking the DOM.

I was amused that we'd come up with something so similar even though there must be so many other possibilities, e.g. the classic "Other" choice, which demands the user be more specific upon choosing this option by typing into a box after it.