Disabling couple input area if dropdown equal to 1-CodePudding

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 >
<label for="slider_type">Slider Type</label>

<select name="slider_type"  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"  placeholder="Slider Title" onchange="DisableSliderInputArea()" required>
</div>
</div>
<div >
    <div >
<label for="slider_description">Slider Body</label>
<input type="text" name="slider_description" id="slider_description"  placeholder="Slider Body" required>
</div>
</div>
<div >
    <div >
<label for="slider_button_link">Slider Button Link</label>
<input type="text" name="slider_button_link" id="slider_button_link"  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?

CodePudding user response：

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 >
         <label for="slider_type">Slider Type</label>
         <select name="slider_type"  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"  placeholder="Slider Title" onchange="DisableSliderInputArea()" required>
      </div>
      </div>
      <div >
         <div >
            <label for="slider_description">Slider Body</label>
            <input type="text" name="slider_description" id="slider_description"  placeholder="Slider Body" required>
         </div>
      </div>
      <div >
         <div >
            <label for="slider_button_link">Slider Button Link</label>
            <input type="text" name="slider_button_link" id="slider_button_link"  placeholder="Slider Button Link" required>
         </div>
      </div>

CodePudding user response：

you're almost done, just incorrectly putting onchange="DisableSliderInputArea()"

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

<div >
  <label for="slider_type">Slider Type</label>

  <select name="slider_type"  id="slider_type" onchange="DisableSliderInputArea()" 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"  placeholder="Slider Title" required>
<div >
  <div >
    <label for="slider_description">Slider Body</label>
    <input type="text" name="slider_description" id="slider_description"  placeholder="Slider Body" required>
  </div>
</div>
<div >
  <div >
    <label for="slider_button_link">Slider Button Link</label>
    <input type="text" name="slider_button_link" id="slider_button_link"  placeholder="Slider Button Link" required>
  </div>
</div>