Solved

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

Posted on 2006-06-28
18
511 Views
Last Modified: 2012-06-27
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
0
Comment
Question by:y2jk
  • 10
  • 8
18 Comments
 
LVL 18

Expert Comment

by:Morcalavin
ID: 17000322
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.
0
 

Author Comment

by:y2jk
ID: 17000415
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?)?
0
 
LVL 18

Expert Comment

by:Morcalavin
ID: 17000490
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);
0
 
LVL 18

Expert Comment

by:Morcalavin
ID: 17000497
<input type=text id=foo><br>  <-- Left in for testing, can be removed.
0
 

Author Comment

by:y2jk
ID: 17000708
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?
0
 
LVL 18

Expert Comment

by:Morcalavin
ID: 17000790
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
0
 

Author Comment

by:y2jk
ID: 17001727
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?
0
 
LVL 18

Expert Comment

by:Morcalavin
ID: 17001806
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.
0
 
LVL 18

Expert Comment

by:Morcalavin
ID: 17001824
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.
0
How your wiki can always stay up-to-date

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

 

Author Comment

by:y2jk
ID: 17001906
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.
0
 
LVL 18

Expert Comment

by:Morcalavin
ID: 17002707
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>
0
 

Author Comment

by:y2jk
ID: 17008629
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?
0
 
LVL 18

Expert Comment

by:Morcalavin
ID: 17008708
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.
0
 

Author Comment

by:y2jk
ID: 17008733
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!!
0
 
LVL 18

Accepted Solution

by:
Morcalavin earned 125 total points
ID: 17009123
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.
0
 

Author Comment

by:y2jk
ID: 17009254
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.
0
 
LVL 18

Expert Comment

by:Morcalavin
ID: 17009285
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.
0
 

Author Comment

by:y2jk
ID: 17009396
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

Highfive + Dolby Voice = No More Audio Complaints!

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.

Join & Write a Comment

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…
This demo shows you how to set up the containerized NetScaler CPX with NetScaler Management and Analytics System in a non-routable Mesos/Marathon environment for use with Micro-Services applications.
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…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now