Disabling couple input area if dropdown equal to 1

Question

I am stuck up with this on my php page. I can't disable 3 input area after selected dropdown

I Just want to disable irrelevant input areas if type of slider selected like 1 otherwise do nothing

HTML Code which will use for condition:

<div class="form-group">
<label for="slider_type">Slider Type</label>

<select name="slider_type" class="form-select" id="slider_type" required>

<option value="" disabled selected>Please Select</option>
<option value="1">Image</option>
<option value="2">Video</option>

</select>
</div>

HTML Code Which i want to disable if slider_type equal to 1

<label for="slider_title">Slider Title</label>
<input type="text" name="slider_title" id="slider_title" class="form-control round" placeholder="Slider Title" onchange="DisableSliderInputArea()" required>
</div>
</div>
<div class="col-md-6 mb-4">
    <div class="form-group">
<label for="slider_description">Slider Body</label>
<input type="text" name="slider_description" id="slider_description" class="form-control round" placeholder="Slider Body" required>
</div>
</div>
<div class="col-md-6 mb-4">
    <div class="form-group">
<label for="slider_button_link">Slider Button Link</label>
<input type="text" name="slider_button_link" id="slider_button_link" class="form-control round" placeholder="Slider Button Link" required>
</div>
</div>

I tried this JavaScript code lines for 1 input area but it's not worked

            <script type="text/javascript">

function DisableSliderInputArea(){
   
  if(document.getElementById("slider_type").value=="1"){
      document.getElementById("slider_title").disabled = true;
  } else {
    document.getElementById("slider_title").disabled = false;
  } 
                  
} 

    </script>

What's really wrong?

Answer 1

You almost have done all the job, one thing that was missing is the actual call of the function DisableSliderInputArea once your select box has changed its' value. You needed to add an event listener, so once user changes the selected option, your function will get triggered, and the textarea will be disabled or enabled.

Feel free to run the snippet below, and see how it works. I added comments on the lines you need to add in JS section.

function DisableSliderInputArea() {
  if (document.getElementById("slider_type").value == "1") {
    document.getElementById("slider_title").disabled = true;
  } else {
    document.getElementById("slider_title").disabled = false;
  }
}

// Get the select out of the DOM and store in a local variable
const dropdown = document.getElementById("slider_type");

// Attach an event listener, so once the select changes
// its' value, this function will be called
dropdown.addEventListener("change", DisableSliderInputArea);

<div class="form-group">
         <label for="slider_type">Slider Type</label>
         <select name="slider_type" class="form-select" id="slider_type" required>
            <option value="" disabled selected>Please Select</option>
            <option value="1">Image</option>
            <option value="2">Video</option>
         </select>
      </div>
      <label for="slider_title">Slider Title</label>
      <input type="text" name="slider_title" id="slider_title" class="form-control round" placeholder="Slider Title" onchange="DisableSliderInputArea()" required>
      </div>
      </div>
      <div class="col-md-6 mb-4">
         <div class="form-group">
            <label for="slider_description">Slider Body</label>
            <input type="text" name="slider_description" id="slider_description" class="form-control round" placeholder="Slider Body" required>
         </div>
      </div>
      <div class="col-md-6 mb-4">
         <div class="form-group">
            <label for="slider_button_link">Slider Button Link</label>
            <input type="text" name="slider_button_link" id="slider_button_link" class="form-control round" placeholder="Slider Button Link" required>
         </div>
      </div>