Link to home
Start Free TrialLog in
Avatar of y2jk
y2jk

asked on

"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.

<SELECT id=lbNewstat name=lbNewstat>
<option value="YES">YES</option>
<option value="NO">NO</option>
</SELECT>
<input type=hidden name=txtNewstat id=txtNewstat value="YES">

Sub lbNewstat_onchange
      frmAdhocInsert.txtNewstat.value = frmAdhocInsert.lbNewstat(frmAdhocInsert.lbNewstat.selectedIndex).value
End Sub
Avatar of Morcalavin
Morcalavin
Flag of United States of America image

Javascript is needed and I'd use radio button instead of select:

<script>
function notRequired(yesOrno) {
        //Get all input elements
      myInputs = document.getElementsByTagName('input');
            for(var i=0; i < myInputs.length; i++) {
                        //Check if it is an element that can be toggled
                  if(myInputs[i].id.indexOf('not_required') > -1) {
                        if(yesOrno == 'no') {
                              myInputs[i].disabled = true;
                        }
                        else {
                              myInputs[i].disabled = false;            
                        }
                  }
            }
}
</script>

<form name=myform>
<input type=radio name=radio onClick=notRequired('yes');>Yes<input type=radio name=radio onClick=notRequired('no');>No<br>
<input type=text id=not_required><br>
<input type=text id=not_required><br>
<input type=text id=not_required><br>
<input type=text id=not_required><br>
</form>

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.
Avatar of y2jk
y2jk

ASKER

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?)?
I have modified the function to allow for multiple text groups to be disabled/enabled:

<script>
function notRequired(yesOrno, inputGroup) {
      myInputs = document.getElementsByTagName('input');
            for(var i=0; i < myInputs.length; i++) {
                  if(myInputs[i].id.indexOf(inputGroup) > -1) {
                        if(yesOrno == 'no') {
                              myInputs[i].disabled = true;
                        }
                        else {
                              myInputs[i].disabled = false;            
                        }
                  }
            }
}
</script>

<form name=myform>
<input type=radio name=radio onClick=notRequired('yes','group1');>Yes<input type=radio name=radio onClick=notRequired('no','group1');>No<br>
<input type=text id=group1><br>
<input type=text id=group1><br>
<input type=text id=group1><br>
<input type=text id=group1><br>
<input type=text id=foo><br>
<input type=radio name=radio2 onClick=notRequired('yes','group2');>Yes<input type=radio name=radio2 onClick=notRequired('no','group2');>No<br>
<input type=text id=group2><br>
<input type=text id=group2><br>
<input type=text id=group2><br>
<input type=text id=group2><br>
</form>

Just call the function like this:  notRequired(option,groupid);
<input type=text id=foo><br>  <-- Left in for testing, can be removed.
Avatar of y2jk

ASKER

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:

<input type=hidden name=txtNewstat id=txtNewstat value="YES">

Sub lbNewstat_onchange
     frmAdhocInsert.txtNewstat.value = frmAdhocInsert.lbNewstat(frmAdhocInsert.lbNewstat.selectedIndex).value
End Sub

If I'm using radio buttons instead, how do I change the above lines to ensure that the correct values are sent with the form when the ASP page is processed?
Just give your radio buttons a value of yes/no(<input type=radio name=radio1 id=radio1 value=yes onClick...>

Sub radio1_onchange
     frmAdhocInsert.txtNewstat.value = document.getElementById('radio1').value
End Sub
Avatar of y2jk

ASKER

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.

            <tr><td colspan="5">Are Inserts Required?&nbsp;&nbsp;<input type=radio name=radio value="yes" onClick=notRequired('yes','ZZ1');>Yes<input type=radio name=radio value="no" onClick=notRequired('no','ZZ1');>No</td></tr>
            <tr><td valign="top">Insert 1</td><td valign="top"><textarea rows="1" cols="40" id="ZZ1_txtIns1desc" name="ZZ1_txtIns1desc" onblur="call CheckSize(100)">N/A</textarea></td><td valign="top"><input type=text name=ZZ1_txtIns1soff id=ZZ1_txtIns1soff style='width:150' onblur='call CheckDate()'></td><td valign="top"><input type=text name=ZZ1_txtIns1expdel id=ZZ1_txtIns1expdel style='width:150' onblur='call CheckDate()'></td><td valign="top"><SELECT id=ZZ1_lbIns1sel name=ZZ1_lbIns1sel><option value="Select">Select</option><option value="Standard">Standard</option></SELECT><input type=hidden name=ZZ1_txtIns1sel id=ZZ1_txtIns1sel value="Select"></td></tr>
            <tr><td valign="top">Insert 2</td><td valign="top"><textarea rows="1" cols="40" id="ZZ1" name="ZZ1" onblur="call CheckSize(100)">N/A</textarea></td><td valign="top"><input type=text name=ZZ1 id=ZZ1 style='width:150' onblur='call CheckDate()'></td><td valign="top"><input type=text name=ZZ1 id=ZZ1 style='width:150' onblur='call CheckDate()'></td><td valign="top"><SELECT id=ZZ1 name=ZZ1><option value="Select">Select</option><option value="Standard">Standard</option></SELECT><input type=hidden name=ZZ1 id=ZZ1 value="Select"></td></tr>
            <tr><td valign="top">Insert 3</td><td valign="top"><textarea rows="1" cols="40" id="txtIns3desc" name="txtIns3desc" onblur="call CheckSize(100)">N/A</textarea></td><td valign="top"><input type=text name=txtIns3soff id=txtIns3soff style='width:150' onblur='call CheckDate()'></td><td valign="top"><input type=text name=txtIns3expdel id=txtIns3expdel style='width:150' onblur='call CheckDate()'></td><td valign="top"><SELECT id=lbIns3sel name=lbIns3sel><option value="Select">Select</option><option value="Standard">Standard</option></SELECT><input type=hidden name=txtIns3sel id=txtIns3sel value="Select"></td></tr>


Any suggestions?
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.
Avatar of y2jk

ASKER

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>

<table>

      <tr><td colspan="5">Are Inserts Required?&nbsp;&nbsp;<input type=radio name=radio value="yes" onClick=notRequired('foo');>Yes<input type=radio name=radio value="no" onClick=notRequired('foo');>No</td></tr>
         <tr id=foo style=display:none><td valign="top">Insert 1</td><td valign="top"><textarea rows="1" cols="40" id="ZZ1_txtIns1desc" name="ZZ1_txtIns1desc" onblur="call CheckSize(100)">N/A</textarea></td><td valign="top"><input type=text name=ZZ1_txtIns1soff id=ZZ1_txtIns1soff style='width:150' onblur='call CheckDate()'></td><td valign="top"><input type=text name=ZZ1_txtIns1expdel id=ZZ1_txtIns1expdel style='width:150' onblur='call CheckDate()'></td><td valign="top"><SELECT id=ZZ1_lbIns1sel name=ZZ1_lbIns1sel><option value="Select">Select</option><option value="Standard">Standard</option></SELECT><input type=hidden name=ZZ1_txtIns1sel id=ZZ1_txtIns1sel value="Select"></td></tr>
<tr><td colspan="5">Are Inserts Required again?&nbsp;&nbsp;<input type=radio name=radio1 value="yes" onClick=notRequired('bar');>Yes<input type=radio name=radio1 value="no" onClick=notRequired('bar');>No</td></tr>          
<tr id=bar style=display:none><td valign="top">Insert 2</td><td valign="top"><textarea rows="1" cols="40" id="ZZ1" name="ZZ1" onblur="call CheckSize(100)">N/A</textarea></td><td valign="top"><input type=text name=ZZ1 id=ZZ1 style='width:150' onblur='call CheckDate()'></td><td valign="top"><input type=text name=ZZ1 id=ZZ1 style='width:150' onblur='call CheckDate()'></td><td valign="top"><SELECT id=ZZ1 name=ZZ1><option value="Select">Select</option><option value="Standard">Standard</option></SELECT><input type=hidden name=ZZ1 id=ZZ1 value="Select"></td></tr>
          <tr><td valign="top">Insert 3</td><td valign="top"><textarea rows="1" cols="40" id="txtIns3desc" name="txtIns3desc" onblur="call CheckSize(100)">N/A</textarea></td><td valign="top"><input type=text name=txtIns3soff id=txtIns3soff style='width:150' onblur='call CheckDate()'></td><td valign="top"><input type=text name=txtIns3expdel id=txtIns3expdel style='width:150' onblur='call CheckDate()'></td><td valign="top"><SELECT id=lbIns3sel name=lbIns3sel><option value="Select">Select</option><option value="Standard">Standard</option></SELECT><input type=hidden name=txtIns3sel id=txtIns3sel value="Select"></td></tr>
</table>
Avatar of y2jk

ASKER

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?
This code should work as desired:

<script>
function notRequired(myGroup, showorhide) {
     //alert(document.getElementById(myGroup).style.display);
     if(showorhide == 'hide') {
      document.getElementById(myGroup).style.display = 'none';
}
else {
document.getElementById(myGroup).style.display = '';
}
}
</script>

<table>

      <tr><td colspan="5">Are Inserts Required?&nbsp;&nbsp;<input type=radio name=radio value="yes" onClick=notRequired('foo','show');>Yes<input type=radio name=radio value="no" onClick=notRequired('foo','hide');>No</td></tr>
         <tr id=foo style=display:none><td valign="top">Insert 1</td><td valign="top"><textarea rows="1" cols="40" id="ZZ1_txtIns1desc" name="ZZ1_txtIns1desc" onblur="call CheckSize(100)">N/A</textarea></td><td valign="top"><input type=text name=ZZ1_txtIns1soff id=ZZ1_txtIns1soff style='width:150' onblur='call CheckDate()'></td><td valign="top"><input type=text name=ZZ1_txtIns1expdel id=ZZ1_txtIns1expdel style='width:150' onblur='call CheckDate()'></td><td valign="top"><SELECT id=ZZ1_lbIns1sel name=ZZ1_lbIns1sel><option value="Select">Select</option><option value="Standard">Standard</option></SELECT><input type=hidden name=ZZ1_txtIns1sel id=ZZ1_txtIns1sel value="Select"></td></tr>
<tr><td colspan="5">Are Inserts Required again?&nbsp;&nbsp;<input type=radio name=radio1 value="yes" onClick=notRequired('bar','show');>Yes<input type=radio name=radio1 value="no" onClick=notRequired('bar','hide');>No</td></tr>          
<tr id=bar style=display:none><td valign="top">Insert 2</td><td valign="top"><textarea rows="1" cols="40" id="ZZ1" name="ZZ1" onblur="call CheckSize(100)">N/A</textarea></td><td valign="top"><input type=text name=ZZ1 id=ZZ1 style='width:150' onblur='call CheckDate()'></td><td valign="top"><input type=text name=ZZ1 id=ZZ1 style='width:150' onblur='call CheckDate()'></td><td valign="top"><SELECT id=ZZ1 name=ZZ1><option value="Select">Select</option><option value="Standard">Standard</option></SELECT><input type=hidden name=ZZ1 id=ZZ1 value="Select"></td></tr>
          <tr><td valign="top">Insert 3</td><td valign="top"><textarea rows="1" cols="40" id="txtIns3desc" name="txtIns3desc" onblur="call CheckSize(100)">N/A</textarea></td><td valign="top"><input type=text name=txtIns3soff id=txtIns3soff style='width:150' onblur='call CheckDate()'></td><td valign="top"><input type=text name=txtIns3expdel id=txtIns3expdel style='width:150' onblur='call CheckDate()'></td><td valign="top"><SELECT id=lbIns3sel name=lbIns3sel><option value="Select">Select</option><option value="Standard">Standard</option></SELECT><input type=hidden name=txtIns3sel id=txtIns3sel value="Select"></td></tr>
</table>



My email addres is in my profile for a short period of time.  Email me your asp code and I will look over it.
Avatar of y2jk

ASKER

OK thanks. I've copied your addres so you can remove it whenever you like. All e-mails take an age to get through our company firewalls (even outgoing ones!), so don't hold your breath!!
ASKER CERTIFIED SOLUTION
Avatar of Morcalavin
Morcalavin
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of y2jk

ASKER

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.
Ok.  I'm sure the code is good because it works in a normal browser window.  I'm wondering it is getting mashed up with all the vbscript running in there.
Avatar of y2jk

ASKER

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.