SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast aherrera's Avatar
    Join Date
    Mar 2005
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    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
    }
    With some HTML like this:
    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>
    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.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    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

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    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.

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    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

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    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.

  7. #7
    SitePoint Enthusiast aherrera's Avatar
    Join Date
    Mar 2005
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys! I'll have to give those a shot.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •