Estoy atascado con esto en mi página php. No puedo deshabilitar 3 áreas de entrada después del menú desplegable seleccionado
Solo quiero deshabilitar las áreas de entrada irrelevantes si el tipo de control deslizante se seleccionó como 1; de lo contrario, no haga nada
Código HTML que se usará para la condición:
<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>Código HTML que quiero deshabilitar si slider_type es igual a 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>Probé estas líneas de código JavaScript para 1 área de entrada pero no funcionó
<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>¿Qué está realmente mal?
Casi ha hecho todo el trabajo, una cosa que faltaba es la llamada real de la función DisableSliderInputArea una vez que su cuadro de selección haya cambiado su valor. Necesitaba agregar un detector de eventos, por lo que una vez que el usuario cambie la opción seleccionada, su función se activará y el área de texto se deshabilitará o habilitará.
Siéntase libre de ejecutar el fragmento a continuación y ver cómo funciona. Agregué comentarios sobre las líneas que necesita agregar en la sección JS.
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>ya casi terminaste, solo pusiste incorrectamente 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 class="form-group"> <label for="slider_type">Slider Type</label> <select name="slider_type" class="form-select" 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" class="form-control round" placeholder="Slider Title" required> <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>