Question 361266 in Html Question posted in
Some basic documentation can be found here.

Html – Why does my onchange function for disabling form fields not work properly?

I have the two form select menu "transactionSelection" and "categorySelection". My goal is to disable "categorySelection" if the value of "transactionSelection" is "income". Therefore I have the function "disableSelection()". The menu "categorySelected" should by default be disabled.

<label for="transactionSelection" class="form-label mb-0">Transaktionsart</label>
<select class="form-select" id="transactionSelection" onchange="disableSelection()" aria-label="Transaction selection">
    <option value="income">Einnahme</option>
    <option value="spendings">Ausgabe</option>

<label for="categorySelection" class="form-label mb-0">Kategorie</label>
<select class="form-select" id="categorySelection" aria-label="Category selection" disabled>
    <option value="income">Einnahmen</option>
    <option value="mobility">Mobilität</option>
    <option value="home-entertainment">Heimunterhaltung</option>
    <option value="going-out">Ausgehen</option>
    <option value="sport-activities">Sportaktivitäten</option>
    <option value="real-estate">Wohnen</option>
    <option value="insurance">Versicherungen</option> 
    <option value="cost-of-living">Lebenshaltungskosten</option>
    <option value="investing">Investments</option>
    <option value="telecommunication">Telekommunikation</option>
    <option value="media-subscription">Medienabos</option>
    <option value="philanthropy">Philantropie</option>
    <option value="financial-cost">Finanzkosten</option>
    <option value="vacation">Urlaub</option>
    <option value="education">Bildung</option>
    <option value="emigration">Auswanderung</option>
    <option value="other">Sonstiges</option>
</select>

<script>
    function disableSelection() {
        if (this.value == 'income') {
            document.getElementById('categorySelection').disabled = true;
        }
        else {
            document.getElementById('categorySelection').disabled = false;
        }
    }
</script>

However, this is only working once. After selecting the other value of "transactionSelection", the disabled attribute of "categorySelection" disappears and will not set again. When I remove the disabled attribute, it will never set at all, so it seems that the function does not get called. Other js (like several chart.js charts) are working fine.

What am I doing wrong here?

Tags:

3

Answers


  1. 0

    There are a few things going on here.

    1. Make sure your first select element has a closing </select> tag. The code you provided doesn’t have that.

    2. The this that you reference in your disableSelection function references the Window object, which isn’t what you need to achieve your goal.

    3. You’ll need to get the value of the select element and check it against "income". Here’s what I put inside the function to make it work. I have a working example here. https://codepen.io/jufrench/pen/BaEQOwR?editors=1011

       if (document.getElementById('transactionSelection').value === "income") {
     document.getElementById('categorySelection').disabled = true;
   } else {
     document.getElementById('categorySelection').disabled = false;
   }
    Login or Signup to reply.
  2. 0

    From the provided code it is not clear what the issue is, so here is something that works.

    Now that the only test is if the value is "income" or not, you can set disabled to the test result of e.target.value == 'income'.

    const form01 = document.forms.form01;

form01.transactionSelection.addEventListener('change', e => {
  let form = e.target.form;
  form.categorySelection.disabled = (e.target.value == 'income');
});
    <form name="form01">
  <label for="transactionSelection" class="form-label mb-0">Transaktionsart</label>
  <select class="form-select" id="transactionSelection" name="transactionSelection" aria-label="Transaction selection">
    <option value="income">Einnahme</option>
    <option value="spendings">Ausgabe</option>
  </select>

  <label for="categorySelection" class="form-label mb-0">Kategorie</label>
  <select class="form-select" id="categorySelection" name="categorySelection" aria-label="Category selection" disabled>
    <option value="income">Einnahmen</option>
    <option value="mobility">Mobilität</option>
    <option value="home-entertainment">Heimunterhaltung</option>
    <option value="going-out">Ausgehen</option>
    <option value="sport-activities">Sportaktivitäten</option>
    <option value="real-estate">Wohnen</option>
    <option value="insurance">Versicherungen</option>
    <option value="cost-of-living">Lebenshaltungskosten</option>
    <option value="investing">Investments</option>
    <option value="telecommunication">Telekommunikation</option>
    <option value="media-subscription">Medienabos</option>
    <option value="philanthropy">Philantropie</option>
    <option value="financial-cost">Finanzkosten</option>
    <option value="vacation">Urlaub</option>
    <option value="education">Bildung</option>
    <option value="emigration">Auswanderung</option>
    <option value="other">Sonstiges</option>
  </select>
</form>
    Login or Signup to reply.
  3. 0
    1. Don’t use this keyword in disableSelect function it refers to window object, instead try accessing the value using DOM
    2. Use eventHandlers from your script not from your form tag, this is generally more preferred.
      PS: I am not sure this will solve your issue or not, but you must make these changes in your code or you might face some other problems in future
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search