CODEWITHSUNDEEP
javascripthtml
Trevor Ackermann
Trevor Ackermann

Reputation: 176

Drop Down Box Value enables Field

I have the following code to run my Dropdown box and field I want to disable when the value is not equal to value in dropdown.

My code is as follows.

document.getElementById('type').addEventListener('change', function() {
  if (this.value == Hijacking) {
    document.getElementById('hijacking').disabled = false;
  } else {
    document.getElementById('hijacking').disabled = true;
  }
});
<div class="width-qrtr">
  <label>Type of event</label>
  <select name="Type" id="select">
          <option value="">Select Type</option> 
          <option value="Fraud">Fraud</option>
          <option value="Theft">Theft</option>
          <option value="Accident">Accident</option>
          <option value="Hijacking">Hijacking</option>
     </select>
</div>
<div class="width-qrtr">
  <label>Police Station</label>
  <input id="textbox" disabled="true" type="text" name="Test" />
</div>

It keeps the field disabled. If i change the values to numerical it works but I need the Value for SQL to be inserted into my DB

Upvotes: 0

Views: 29

Answers (2)

HyperVol
HyperVol

Reputation: 146

Few bugs in your code , fixed as follows:

document.getElementById('select').addEventListener('change', function() {
  if (this.value == "Hijacking") {
    document.getElementById('textbox').disabled = false;
  } else {
    document.getElementById('textbox').disabled = true;
  }
});
<div class="width-qrtr">
  <label>Type of event</label>
  <select name="Type" id="select">
          <option value="">Select Type</option> 
          <option value="Fraud">Fraud</option>
          <option value="Theft">Theft</option>
          <option value="Accident">Accident</option>
          <option value="Hijacking">Hijacking</option>
     </select>
</div>
<div class="width-qrtr">
  <label>Police Station</label>
  <input id="textbox" disabled="true" type="text" name="Test" />
</div>

Upvotes: 0

JensV
JensV

Reputation: 4544

document.getElementById works only if you put the corresponding id in defined by id="...". Also to compare string values you have to put them in quotes => this.value == 'Hijacking'.

The corrected code looks like this:

document.getElementById('select').addEventListener('change', function() {
  if (this.value == 'Hijacking') {
    document.getElementById('textbox').disabled = false;
  } else {
    document.getElementById('textbox').disabled = true;
  }
});
<div class="width-qrtr">
  <label>Type of event</label>
  <select name="Type" id="select">
          <option value="">Select Type</option> 
          <option value="Fraud">Fraud</option>
          <option value="Theft">Theft</option>
          <option value="Accident">Accident</option>
          <option value="Hijacking">Hijacking</option>
     </select>
</div>
<div class="width-qrtr">
  <label>Police Station</label>
  <input id="textbox" disabled="true" type="text" name="Test" />
</div>

Upvotes: 1

Related Questions