"Grey Out" boxes on an ASP form if radio button set to "NO"

I am trying to create a web version of a request form currently in Excel. It has a huge number of input boxes (around 90!!), some of which do not need to be filled in if the answer to certain questions is 'no'. I have been asked to grey out the relevant text fields where 'no' has been selected, to help stop users putting text in boxes that don't need it. I have no idea how to code this! Could somebody please give me some example code to:

- show how I would grey out text boxes in a form dependant on the results of another box?
- I will also need the SUB or FUNCTION that does the actual change.
- Lastly, all of my YES/NO options are drop down's using <SELECT>. If radio buttons are a better option (I don't know how to code those!) could you change the code below to show me how I should use them? If the SELECT options below are ok, then ignore this part of the question.

Just give an id of 'not_required' to each text field you want to be enabled/disabled when you select yes/no. Technically, each element should have a unique id, so giving each id 'not_required_0' 'not_required_1' 'not_required_2' etc will still work ok.

That all looks straighforward enough to understand. Just one thing I didn't specify on my original question; within my form I have 3 or 4 YES/NO options, so I have 3 or 4 blocks of text inputs that need to be turned off/on. Will I need 3 or 4 copies of the function (called notRequired1(yesOrno), notRequired2(yesOrno), etc), or is there a way of being able to re-use the same function by naming my elements a certain way (and if so, how?)?

Thanks for that last comment, but I already had all my inputs named anyway, so it was really just the top line I needed (and the function, of course!). One last question, all of the (90+) inputs on my form are also database items, hence in the example I posted I had the following hidden inputs alongside each <SELECT> and SUB's to record the values:

Can't get it working. I've tried several combinattions of your code, calling items group1_xxxx (where xxxx is the original id of the item), or changing them all to just group1, but each time I refresh the web page, whichever option I click on, nothing happens, and I can still type in the relevant boxes.

I have pasted into the head of my web page the function in your second post, and here is a small portion of the web page I have been trying to get to work with the radio buttons. I've pasted the entire contents below so you can see exactly what I've done, in case I've made a silly mistake. On the first row I've inserted ZZ1_ in front of the original names, on the second row I've replaced everything with just ZZ1, the third row hasn't been altered yet. I would have expected one or the other row to work, but nothing does.

The script is working exactly as designed. All <input> style elements with the proper id's are being locked.
<textarea> elements are not being locked because they are not in the function I provided. I assumed your were talking about <input type=text> elements and not a mixture of the two.

Row one, the '<input type=text>' elements are locked when 'no' is selected. The select and textarea are unaffected
Row two, the '<input type=text>' elements are locked when 'no' is selected. The select and textarea are unaffected
Row three nothing is affected since the input elements do not have the proper id.

If you are going to have different types of elements being enabled/disabled, we will have to heavily change our javascript function, since it only applies to input elements with the proper id.

Instead of having them enable/disable, would you rather then appear/disappear completely. It woud be slightly easier to do, since the groups could be placed in div tag and would required less code changes.

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Re: your first comment, I placed the code and table rows above into another document and they worked, but they don't work in my ASP page. I wonder if it's because I have a mixture of javascript and vbscript in it? Or whether it's because the portion I posted above is a table within another table? Curious.

Re: your second comment (appear/disappear), that would be an acceptable alternative.

It should work in any html page. Make sure you are running it as client side code though.
You can use something similar to this to hide/show certain rows.
<script>
function notRequired(myGroup) {
//alert(document.getElementById(myGroup).style.display);
if(document.getElementById(myGroup).style.display == '') {
document.getElementById(myGroup).style.display = 'none';
}
else {
document.getElementById(myGroup).style.display = '';
}
}
</script>

Sorry, but this is simply not working. When I paste your code into a blank html page, the cells appear and disappear even if I click on the same button twice (i.e. clicking on YES toggles the view on and off), but again if I paste the contents into my ASP page, the script does nothing, the cells are hidden and clicking on either radio button seems to do absolutely nothing. I just don't understand it.

I would paste the entire ASP page here, but it's too big. Any suggestions?

I replied with some changes. I moved the javascript down to the last section before the end of the </head> tag. I actually modified the first chunk of code I gave you, since everything you want hidden is are contained within rows(<tr>) tags.

Still no good, I'm getting a page error "Expected End of Statement" (the little yellow triangle that appears when the page loads), and the radio buttons are doing nothing.

I've asked the server admin team to see why I'm getting that error (I'm sure it's due to the layers of security we have here), hopefully when they advise me why the page is erroring (and correct it) your code should work too. I'll get back to you ASAP.

You won't believe how simple the error was - apparently it didn't like the semi-colons after the onClick actions. Once they were removed the page loaded fine, and your hide/unhide code works perfectly too!!

So I'm sorted now. Thanks for all your help.

0

Featured Post

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Hello, all! I just recently started using Microsoft's IIS 7.5 within Windows 7, as I just downloaded and installed the 90 day trial of Windows 7. (Got to love Microsoft for allowing 90 days) The main reason for downloading and testing Windows 7 is t…

I would like to start this tip/trick by saying Thank You, to all who said that this could not be done, as it forced me to make sure that it could be accomplished. :)
To start, I want to make sure everyone understands the importance of utilizing p…

You have products, that come in variants and want to set different prices for them? Watch this micro tutorial that describes how to configure prices for Magento super attributes.
Assigning simple products to configurable: We assigned simple products…