CODEWITHSUNDEEP
javascriptjqueryhtml
Will Croxford
Will Croxford

Reputation: 477

Javascript disable/enable input field based on selection other field

I tried to follow answer here to do this in my code: How do I disable input field when certain select list value is picked but not working for me.

I have an HTML select field id 'TfL' with Yes/No answer, and next field 'TfLroad' is an input field. I want 'TfLroad' to load as disabled by default, then if 'TfL' changes from No to Yes, then 'TfLroad' should be enabled.

Whole page code below, JS at top of file, these two fields next to bottom, tx any suggestions!:

{% extends "base.jinja2" %}
{% block content %}

<script>

// value 0 for No answer to TfL road 1 for, in which case disabled, on change should
// enable TfLroad element by setting disabled = false, but not working yet!

document.getElementById("TfLroad").onload = function () {
    document.getElementById("TfLroad").disabled = true;
}

document.getElementById('TfL').onchange = function () {
    if(this.value = '0') {
        document.getElementById("TfLroad").disabled = true;
    }

    else {
        document.getElementById("TfLroad").disabled = false;
    }
}


</script>
                <h2 style="text-align:center">Add A 'Dummy' Street</h2>

<p>You can create a Dummy street here, which you will be able to search for in this application. This is to
demonstrate how a real Create &amp; Update Process could work for this application, without corrupting the original
data. Dummy streets are indicated in search results.</p>

<form class="form-horizontal" action = "" method="post">
  <fieldset>

     <div class="form-group">

        <div class="col-lg-6">
            <label for="stname" class="control-label">Street Name</label>
            <input class="form-control" id="stname" name="stname" pattern="^\S.{3,98}\S$"
                   title="Sorry, you must type from 5 to 100 characters, and no space at beginning or end."
                   placeholder="Full Street Name" required>
            <!--  required attribute needed because empty string bypasses the pattern regex. -->
            <span class="help-block">NB: No naughty word streets please, these will be deleted by admin!</span>
        </div>

<!-- CR, CL, PR, 25, 16, 19, BE, KN, SC, TH, WA, WH -->
        <div class="col-lg-3">
            <label for="distr" class="control-label">Postal District</label>
            <select class="form-control" id="distr" name="distr">
              <option>Croydon (CR0, CR2, CR7 or CR9)</option>
              <option>Coulsdon CR5</option>
              <option>Purley CR8</option>
              <option>London SE25</option>
              <option>London SW16</option>
              <option>Kenley CR8</option>
              <option>South Croydon CR2</option>
              <option>Thornton Heath CR7</option>
              <option>Warlingham CR6</option>
              <option>Whyteleafe CR3</option>
              <option>Beckenham BR3</option>
            </select>
            <span class="help-block">NB: Original data uses postal district only, hence problem with several postcodes for Croydon.</span>
        </div>

        <div class="col-lg-3">
            <label for="maint" class="control-label">Who looks after this street?</label>
            <select class="form-control" id="maint" name="maint">
              <option>Croydon Borough</option>
              <option>Transport for London</option>
              <option>Private Road</option>
            </select>
        </div>

    </div>

    <div class="form-group">
        <h4 class="centre">Street Number Limits for this Street Section<br/><small>Please leave as None if all properties in this section have names</small></h4>
    </div>

    <div class="form-group">
        <div class="col-lg-3">
            <label for="onb" class="control-label">Odd Numbers From</label>
            <input class="form-control" id="onb" name="onb" value="None" pattern="^\d*[13579]$|(None)" title="Odd Numbers only please with no spaces, or None">
            <span class="help-block">e.g. '1' or '111'</span>
        </div>

        <div class="col-lg-3">
            <label for="one" class="control-label">Odd Numbers To</label>
            <input class="form-control" id="one" name="one" value="None" pattern="^\d*[13579]$|(None)" title="Odd Numbers only please with no spaces, or None">
            <span class="help-block">e.g. '31' or '217'</span>
        </div>

        <div class="col-lg-3">
            <label for="enb" class="control-label">Even Numbers From</label>
            <input class="form-control" id="enb" name="enb" value="None" pattern="^\d*[02468]$|(None)" title="Even Numbers only please with no spaces, or None">
            <span class="help-block">e.g. '2' or '110'</span>
        </div>

        <div class="col-lg-3">
            <label for="ene" class="control-label">Even Numbers To</label>
            <input class="form-control" id="ene" name="ene" value="None" pattern="^\d*[02468]$|^(None)$" title="Even Numbers only please with no spaces, or None">
            <span class="help-block">e.g. '32' or '216'</span>
        </div>
    </div>

    <div class="form-group">
        <div class="col-lg-4">
            <label for="rdclass" class="control-label">Road Class</label>
            <select class="form-control" id="rdclass" name="rdclass">
              <option>Unclassified</option>
              <option>A Road</option>
              <option>B Road</option>
              <option>C Road</option>
            </select>
            <span class="help-block">Leave as Unclassified if in any doubt.</span>
        </div>

        <div class="col-lg-4">
            <label for="length" class="control-label">Length of this Street Section (whole no. metres)</label>
            <input class="form-control" id="length" name="length" value= 0 pattern="^[1-9][0-9]*$" title="Whole number of metres please, no spaces!" required>
        </div>

        <div class="col-lg-4">
            <!-- JS here to put in A B C / disable depending on what selected in rdclass box -->
            <label for="rdnum" class="control-label">Road Number</label>
            <input class="form-control" id="rdnum" name="rdnum" pattern="^[ABC][1-9][0-9]*$|^(None)$" title="Must be None, or A, B or C followed by a whole number for the road class, no spaces!" value="None" required>
            <span class="help-block">Only for A/B/C roads e.g. 'A232', 'C3241'</span>
        </div>
    </div>

    <div class="form-group">
        <div class="col-lg-3">
            <label class="control-label left">Does one end of this street adjoin a TfL maintained street?</label>
            <select class="form-control" id="TfL">
              <option value="0">No</option>
              <option value="1">Yes</option>
            </select>
        </div>

        <div class="col-lg-4">
            <!-- JS not working yet to disable only if no selected in rdclass box -->
            <label class="control-label"><br/>&nbsp;Road Number of Adjoining TfL Road?</label>

            <input class="form-control" pattern="^[ABC][1-9][0-9]*$|^(None)$"
                   title="Must be None, or A, B or C followed by a whole number, no spaces!" value="None" id="TfLroad" required>

           <span class="help-block">E.g. 'A232', 'B2441'</span>
        </div>

    </div>

    <div class="form-group">
        <div class="centre">
            <button type="reset" class="btn btn-default">Reset Form</button>
            <button type="submit" class="btn btn-primary">Create Street</button>
        </div>
    </div>
  </fieldset>
</form>
{% endblock %}

Upvotes: 0

Views: 17528

Answers (4)

searlea
searlea

Reputation: 8378

There are several problems in the HTML/script you provided.

  1. The <script> content is executing before the form fields exist (onload code isn't implemented the way you've done it.)
  2. You haven't picked a default value for TfL
  3. You haven't disabled TfLroad by default
  4. You've got a typo in a comparison.

Fixing in order:

  1. move the <script> to the bottom of the page and remove the onload function.

  2. assuming you want No selected by default:

      <select class="form-control" id="TfL">
    <option value="0" selected>No</option>
    <option value="1">Yes</option>
  </select>

  3. Add disabled attribute

    <input class="form-control" pattern="^[ABC][1-9][0-9]*$|^(None)$" disabled
  title="Must be None, or A, B or C followed by a whole number, no spaces!" value="None" id="TfLroad" required>

  4. usie = instead of == (or ===):

    if(this.value = '0') {

Should be

    if(this.value === '0') {

(You could also rewrite the onchange handler):

document.getElementById('TfL').onchange = function () {
  document.getElementById("TfLroad").disabled = (this.value === '0');
}

Upvotes: 3

Naren Murali
Naren Murali

Reputation: 56640

So the problem is load event does not work on all elements, it only supports the below HTML tags.

<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">,
<link>, <script> and <style>

Refer here to know more.

Also I have changed the logic for applying the initial disabled condition, please check it!

As an alternative you can watch for document.ready instead and then apply this change. Refer the below snippet.

var select = document.getElementById('TfL'), input = document.getElementById("TfLroad");
document.addEventListener("DOMContentLoaded", function(event) { 
  if (select.value === '0') {
    input.disabled = true;
  } else {
    input.disabled = false;
  }
});

select.onchange = function() {
  if (this.value === '0') {
    input.disabled = true;
  } else {
    input.disabled = false;
  }
}
<h2 style="text-align:center">Add A 'Dummy' Street</h2>

<p>You can create a Dummy street here, which you will be able to search for in this application. This is to demonstrate how a real Create &amp; Update Process could work for this application, without corrupting the original data. Dummy streets are indicated
  in search results.</p>

<form class="form-horizontal" action="" method="post">
  <fieldset>

    <div class="form-group">

      <div class="col-lg-6">
        <label for="stname" class="control-label">Street Name</label>
        <input class="form-control" id="stname" name="stname" pattern="^\S.{3,98}\S$" title="Sorry, you must type from 5 to 100 characters, and no space at beginning or end." placeholder="Full Street Name" required>
        <!--  required attribute needed because empty string bypasses the pattern regex. -->
        <span class="help-block">NB: No naughty word streets please, these will be deleted by admin!</span>
      </div>

      <!-- CR, CL, PR, 25, 16, 19, BE, KN, SC, TH, WA, WH -->
      <div class="col-lg-3">
        <label for="distr" class="control-label">Postal District</label>
        <select class="form-control" id="distr" name="distr">
              <option>Croydon (CR0, CR2, CR7 or CR9)</option>
              <option>Coulsdon CR5</option>
              <option>Purley CR8</option>
              <option>London SE25</option>
              <option>London SW16</option>
              <option>Kenley CR8</option>
              <option>South Croydon CR2</option>
              <option>Thornton Heath CR7</option>
              <option>Warlingham CR6</option>
              <option>Whyteleafe CR3</option>
              <option>Beckenham BR3</option>
            </select>
        <span class="help-block">NB: Original data uses postal district only, hence problem with several postcodes for Croydon.</span>
      </div>

      <div class="col-lg-3">
        <label for="maint" class="control-label">Who looks after this street?</label>
        <select class="form-control" id="maint" name="maint">
              <option>Croydon Borough</option>
              <option>Transport for London</option>
              <option>Private Road</option>
            </select>
      </div>

    </div>

    <div class="form-group">
      <h4 class="centre">Street Number Limits for this Street Section<br/><small>Please leave as None if all properties in this section have names</small></h4>
    </div>

    <div class="form-group">
      <div class="col-lg-3">
        <label for="onb" class="control-label">Odd Numbers From</label>
        <input class="form-control" id="onb" name="onb" value="None" pattern="^\d*[13579]$|(None)" title="Odd Numbers only please with no spaces, or None">
        <span class="help-block">e.g. '1' or '111'</span>
      </div>

      <div class="col-lg-3">
        <label for="one" class="control-label">Odd Numbers To</label>
        <input class="form-control" id="one" name="one" value="None" pattern="^\d*[13579]$|(None)" title="Odd Numbers only please with no spaces, or None">
        <span class="help-block">e.g. '31' or '217'</span>
      </div>

      <div class="col-lg-3">
        <label for="enb" class="control-label">Even Numbers From</label>
        <input class="form-control" id="enb" name="enb" value="None" pattern="^\d*[02468]$|(None)" title="Even Numbers only please with no spaces, or None">
        <span class="help-block">e.g. '2' or '110'</span>
      </div>

      <div class="col-lg-3">
        <label for="ene" class="control-label">Even Numbers To</label>
        <input class="form-control" id="ene" name="ene" value="None" pattern="^\d*[02468]$|^(None)$" title="Even Numbers only please with no spaces, or None">
        <span class="help-block">e.g. '32' or '216'</span>
      </div>
    </div>

    <div class="form-group">
      <div class="col-lg-4">
        <label for="rdclass" class="control-label">Road Class</label>
        <select class="form-control" id="rdclass" name="rdclass">
              <option>Unclassified</option>
              <option>A Road</option>
              <option>B Road</option>
              <option>C Road</option>
            </select>
        <span class="help-block">Leave as Unclassified if in any doubt.</span>
      </div>

      <div class="col-lg-4">
        <label for="length" class="control-label">Length of this Street Section (whole no. metres)</label>
        <input class="form-control" id="length" name="length" value=0 pattern="^[1-9][0-9]*$" title="Whole number of metres please, no spaces!" required>
      </div>

      <div class="col-lg-4">
        <!-- JS here to put in A B C / disable depending on what selected in rdclass box -->
        <label for="rdnum" class="control-label">Road Number</label>
        <input class="form-control" id="rdnum" name="rdnum" pattern="^[ABC][1-9][0-9]*$|^(None)$" title="Must be None, or A, B or C followed by a whole number for the road class, no spaces!" value="None" required>
        <span class="help-block">Only for A/B/C roads e.g. 'A232', 'C3241'</span>
      </div>
    </div>

    <div class="form-group">
      <div class="col-lg-3">
        <label class="control-label left">Does one end of this street adjoin a TfL maintained street?</label>
        <select class="form-control" id="TfL">
              <option value="0">No</option>
              <option value="1">Yes</option>
            </select>
      </div>

      <div class="col-lg-4">
        <!-- JS not working yet to disable only if no selected in rdclass box -->
        <label class="control-label"><br/>&nbsp;Road Number of Adjoining TfL Road?</label>

        <input class="form-control" pattern="^[ABC][1-9][0-9]*$|^(None)$" title="Must be None, or A, B or C followed by a whole number, no spaces!" value="None" id="TfLroad" required>

        <span class="help-block">E.g. 'A232', 'B2441'</span>
      </div>

    </div>

    <div class="form-group">
      <div class="centre">
        <button type="reset" class="btn btn-default">Reset Form</button>
        <button type="submit" class="btn btn-primary">Create Street</button>
      </div>
    </div>
  </fieldset>
</form>

Upvotes: 1

Mr. Greenwoodz
Mr. Greenwoodz

Reputation: 255

Instead of setting disabled through javascript you could add the disabled to the HTML input element:

<input class="form-control" disabled="disabled" .... />

Then in your javascript:

document.getElementById('TfL').onchange = function () 
{
    if (this.value == '0') 
    {
        document.getElementById("TfLroad").disabled = true;
    }

    else 
    {
        document.getElementById("TfLroad").disabled = false;
    }
}

Upvotes: 6

VTodorov
VTodorov

Reputation: 973

disabled is a Boolean attribute. You don't disable an element by setting its attribute to disabled=false. The browser checks if your element HAS a disabled property and doesn't care if its disabled=true, disabled=false, disabled=elephant. In order to "enable" your element you must completely remove the disabled attribute.

This should work:

document.getElementById('TfL').onchange = function () {
    if(this.value == '0') {
        document.getElementById("TfLroad").disabled = "elephant";
    }

    else {
        document.getElementById("TfLroad").removeAttr("disabled");
    }
}

Also when comparing two values use == and not =.

Upvotes: 2

Related Questions