0

Tengo un formulario en el que si no a seleccionado un almacén no puede escribir una referencia por lo cual lo tengo deshabilitado pero la función no hace la acción.

<label for="warehouse">* Almacén</label>
<select id="warehouse_id" onChange="myDisFunction()">
 ... </select>

<label for="inventory_id">* Referencia</label>
<input type="text" id="inventory_id">

<script>
    function myDisFunction() {
    var x = document.getElementById("warehouse_id").value;
    if(warehouse_id != null){
        inventory_id.disabled =false;
        }
    }
</script>
1
  • ya lo edite, asi es como lo tengo ahora si Commented el 11 oct. 2022 a las 14:21

2 respuestas 2

1

Algo más simple podrías hacerlo de la siguiente forma:

var x = document.getElementById('inventory_id');
x.disabled = true;

function myDisFunction(element) {
  y = element.value;
  
  if(y == "0"){
    x.disabled = true;
  }else{
    x.disabled = false;
  }
}
<label for="warehouse">* Almacén</label>
<select onChange="myDisFunction(this)">
  <option value="0">Seleccionar</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<label>* Referencia</label>
<input id="inventory_id" type="text">

0
0

Varias cosas:

  1. De entrada, el input debería aparecer como disabled
  2. Tienes que referenciar al input por su id, para habilitarlo o no, cosa que no haces.
  3. Tienes que verificar el valor selectedIndex del select para saber si han sido seleccionados o no. En el código de ejemplo he puesto un option por defecto para evitar confusiones. Esto permite dos cosas: desmarcar una opción que se haya elegido por error, volviendo a ese option por defecto; y volver a deshabilitar el input en ese caso. Ambas cosas serán harto difíciles cuando no imposibles sin ese option por defecto.

function myDisFunction() {
  var selWarehouse = document.getElementById("warehouse_id");
  var refInput = document.getElementById("ref_id");
  refInput.disabled = (!selWarehouse.selectedIndex > 0);

}
<label for="warehouse">* Almacén</label>
<select id="warehouse_id" onChange="myDisFunction()">
  <option selected>-- Seleccione --</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

<label for="inventory_id">* Referencia</label>
<input type="text" id="ref_id" disabled>

Finalmente, te recomiendo que evites funciones in-line, son una mala práctica. Es mejor asignar eventos de escucha en el código Javascript, así, tu HTML es independiente. Poner funciones in-line significa poner en contexto HTML código Javascript, violando el principio de responsabilidad única.

Veamos un ejemplo usando escucha de eventos:

const selWarehouse = document.querySelector('#warehouse_id');

selWarehouse.addEventListener('change', (event) => {
  var refInput = document.getElementById("ref_id");
  refInput.disabled = (!selWarehouse.selectedIndex > 0);
});
<label for="warehouse">* Almacén</label>
<select id="warehouse_id">
  <option selected>-- Seleccione --</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

<label for="inventory_id">* Referencia</label>
<input type="text" id="ref_id" disabled>

¿Cuál es la diferencia? Hemos sacado la llamada in-line del HTML: onChange="myDisFunction(this)", no la necesitamos, estamos escuchando los cambios del select, por su id.

¿Qué ventajas tiene esto? Ya dije una: respetamos el principio de responsabilidad única y facilitamos el mantenimiento del código. Imagina un proyecto grande, con miles de HTML en los que has puesto llamadas in-line. Ahora, esas funciones in-line necesitan otro parámetro o algo por el estilo. Te quiero ver, buscando entre los miles de HTML para cambiar esto: onChange="myDisFunction(this)" por esto: onChange="myDisFunction(this,ooootroParametro)".

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.