SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
-
Mar 6, 2008, 16:59 #1
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% 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).
I hope that makes sense!
.angie
-
Mar 6, 2008, 18:16 #2
- Join Date
- Sep 2005
- Location
- Tanzania
- Posts
- 4,662
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
Read this first.
Once you have accessed a particular form element that you want to disable, you use the "disabled" property to do so:
Code Javascript:var gen = document.getElementById('gender'); var lastvisit = gen.nextSibling.nextSibling.getElementsByTagName('input')[0]; var genders = gen.getElementsByTagName('input'); if (gen[0].checked === true) { // if male is checked lastvisit.disabled = true; // men don't go to the gynaecologist so it's irrelevant. Disable it. } else { lastvisit.disabled = false; //visitor is a woman, so allow visitor to fill in last visit date }
HTML Code:<div id="gender"> <input type="radio" name="gendertype" value="male"> <input type="radio" name="gendertype" value="female"> </div> <div> <label for="gynlastvisit">When did you last see your gynaecologist? (dd/mm/yyyy)</label> <input type="text" name="gynlastvisit" id="gynlastvisit"> </div>
-
Mar 6, 2008, 18:21 #3
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
Having your form structure would have helped to put together an appropriate answer, but here's something that works well.
Code html4strict:<html> <head> <title>Test</title> <style type="text/css"> .enabled { background: #eef; } .disabled { background: #fee; } </style> </head> <body> <form id="myForm"> <input type="radio" name="sex" id="male" value="male"> <label for="male">Male</label> <input type="radio" name="sex" id="female" value="female"> <label for="female">Female</label> <div id="favShaver"> <label for="shaver">Type of shaver</label> <input type="text" id="shaver" name="shaver"> </div> </form> <script> var sex = document.getElementsByName('sex'); sex[0].onclick = function () { shaver(true); }; sex[1].onclick = function () { shaver(false); }; function shaver(enabled) { var id = 'shaver'; var el = document.getElementById(id); var labels = document.getElementsByTagName('label'); var label; for (var i = 0; i < labels.length; i++) { if (labels[i].getAttribute('for') === id) { label = labels[i]; break; } } if (enabled) { el.removeAttribute('disabled', 'disabled'); label.className = 'enabled'; } else { label.className = 'disabled'; el.setAttribute('disabled', 'disabled'); } } </script> </body> </html>
Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Mar 6, 2008, 18:31 #4
- Join Date
- Sep 2005
- Location
- Tanzania
- Posts
- 4,662
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
But many women shave their legs!
BTW your last label is missing a closing tag.
-
Mar 6, 2008, 18:50 #5
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
Yeah, I was trying to think of a situation where something would apply to one group but not another and only came up with facial shavers.
Well done on coming up with the gynaecological visit idea.Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Mar 6, 2008, 19:32 #6
- Join Date
- Sep 2005
- Location
- Tanzania
- Posts
- 4,662
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
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.
Gender is just the blatantly obvious one I suppose.
-
Mar 6, 2008, 19:46 #7
Thanks guys! I'll have to give those a shot.
Bookmarks