CODEWITHSUNDEEP
javascripthtml
Abi Houghton
Abi Houghton

Reputation: 111

Text box to be enabled when drop down box is selected

I am wanting to get a text box to appear when a either NINO or CRN is selected in the drop down box.

My problem is that the text box seems to always appear and then when I select Unknown it disappears, I would prefer it to only appear when the drop down options are the option.

This is my code:

var select = document.getElementById('NINOCRN'),
  onChange = function(event) {
    var shown = this.options[this.selectedIndex].value == "NINO";

    document.getElementById('hidden_div').style.display = shown ? 'block' : 'none';
  };
//attach event handler
if (window.addEventListener) {
  select.addEventListener('change', onChange, false);
} else {
  // of course, IE < 9 needs special treatment
  select.attachEvent('onchange', function() {
    onChange.apply(select, arguments);
  });
}
National Insurance, CRN, Unknown
<select id="NINOCRN" required onchange="showDiv(this)">
  <option value="select" disabled selected>Please Select</option>
  <option value="NINO">National Insurance Number (NINO)</option>
  <option value="CRN">Child Reference Number (CRN)</option>
  <option value="Unknown">Unknown NINO/CRN</option>
</select>
<br>
<br>
<br>

<div id="hidden_div">
  <input type="text" name="NINO" required>
  <br>
  <br>

</div>

Can anyone help me?

Upvotes: 0

Views: 67

Answers (1)

Venugopal
Venugopal

Reputation: 1896

hide the input first, then show/hide based on your selection. 

var select = document.getElementById('NINOCRN'),
onChange = function(event) {
    var val = this.options[this.selectedIndex].value;
    var shown = val === "NINO" || val === "CRN";
    document.getElementById('hidden_div').style.display = shown ? 'block' : 'none';
};

//attach event handler
if (window.addEventListener) {
    select.addEventListener('change', onChange, false);
} else {
// of course, IE < 9 needs special treatment
    select.attachEvent('onchange', function() {
        onChange.apply(select, arguments);
    });
}

check the fiddle

Upvotes: 2

Related Questions