0

Tengo el siguiente formulario html el cual tiene un campo readonly "Precio Base" y quiero llenarlo con un valor que dependerá de los datos que tengan los otros inputs para luego validarlo con Javascript y con Java (JSP, Servlets) guardarlos en una base de datos.

<form class="col-lg-6 col-md-8 col-sm-12 mx-auto form-style">
    <h1 class="text-center text-dark text-uppercase font-weight-bold">Registrar Nuevo Alquiler</h1>
    <div class="form-group">
        <label for="pisoOficina">Piso</label>
        <input type="number" class="form-control" id="pisoOficina" placeholder="Piso" min="1" max="5">
    </div>
    <div class="form-group">
        <label for="cantidadSillasOficina">Cantidad de Sillas</label>
        <input type="number" class="form-control" id="cantidadSillasOficina" placeholder="Cantidad de Sillas" min="1">
    </div>
    <div class="form-group">
        <label for="frenteVentanaOficina">¿Frente a Ventana?</label>
        <select class="form-control" id="frenteVentanaOficina">
            <option>Si</option>
            <option>No</option>
        </select>
    </div>
    <div class="form-group">
        <label for="precioBaseOficina">Precio Base</label>
        <input type="number" class="form-control" id="precioBaseOficina" placeholder="Precio Base" readonly>
    </div>
    <button type="submit" class="btn btn-dark w-100">AGREGAR ALQUILER</button>
</form>

Por ejemplo, si el usuario ingresa en el input de piso el valor 1, entonces automáticamente el precio base sera de 2000, pero si el usuario borra el valor 1 o lo cambia el precio base cambiara. Conozco formas de hacerlo con un botón "Calcular Precio" pero si existiese alguna forma de que sea automático seria lo mas adecuado.

1 respuesta 1

1

Puedes agregar listeners al input pisoOficina mediante addEventListener para manejar los eventos onkeyup (cambios por teclado) y onMouseUp (click en spinner). Luego, según el valor del input, setear el valor adecuado en el input precioBaseOficina. Tambien debes tener en cuenta el onchange del select que indica si es frente a ventana, ya que al cambiar deberías recalcular el valor.

let pisoOficina = document.getElementById('pisoOficina');
let precioBaseOficina = document.getElementById('precioBaseOficina');
let frenteVentanaOficina = document.getElementById('frenteVentanaOficina');


// Listeners para recalcular el precio cuando cambia el piso

pisoOficina.addEventListener("keyup", calcularPrecio);

pisoOficina.addEventListener("mouseup", calcularPrecio);

// Listener para recalcular el precio cuando cambia el select de frente a ventana

frenteVentanaOficina.addEventListener("change", calcularPrecio);

// Función que calcula el precio en funcion del piso y si es frente a ventana.

function calcularPrecio(){
    let frenteAVentana = frenteVentanaOficina.value === "Si";
    // Si es frente a ventana agregamos $500
    let agregadoVentana = frenteAVentana ? 500 : 0;
    let piso = pisoOficina.value;
    switch(piso){
      case("1"):
         // Sumamos el precio base del piso y el agregado de ventana, que sera 500 o 0.
         precioBaseOficina.value = 2000 + agregadoVentana;
         break;
      case("2"):
        precioBaseOficina.value = 4000 + agregadoVentana;
        break;
      default:
        precioBaseOficina.value =0;

    }
}
<form class="col-lg-6 col-md-8 col-sm-12 mx-auto form-style">
    <h1 class="text-center text-dark text-uppercase font-weight-bold">Registrar Nuevo Alquiler</h1>
    <div class="form-group">
        <label for="pisoOficina">Piso</label>
        <input type="number" class="form-control" id="pisoOficina" placeholder="Piso" min="1" max="5">
    </div>
    <div class="form-group">
        <label for="cantidadSillasOficina">Cantidad de Sillas</label>
        <input type="number" class="form-control" id="cantidadSillasOficina" placeholder="Cantidad de Sillas" min="1">
    </div>
    <div class="form-group">
        <label for="frenteVentanaOficina">¿Frente a Ventana?</label>
        <select class="form-control" id="frenteVentanaOficina">
            <option>Si</option>
            <option>No</option>
        </select>
    </div>
    <div class="form-group">
        <label for="precioBaseOficina">Precio Base</label>
        <input type="number" class="form-control" id="precioBaseOficina" placeholder="Precio Base" readonly>
    </div>
    <button type="submit" class="btn btn-dark w-100">AGREGAR ALQUILER</button>
</form>

6
  • 1
    Faltaría el caso en que el usuario use el spinner del input
    – Yikarus
    el 4 nov. 2017 a las 14:33
  • Cierto, he editado la respuesta. el 4 nov. 2017 a las 14:41
  • 1
    Muchas gracias por tu respuesta Marcos! Muy completa. Es muy complicado si al valor final de Precio Base le sumo un valor X dependiendo del combobox de la ventana? Intente agregando un evento de click y un switch al igual que usted pero no obtengo los resultados deseados.
    – Lucas. D
    el 4 nov. 2017 a las 14:59
  • He editado la respuesta para contemplar ese caso, hazme saber si no queda claro. Saludos el 4 nov. 2017 a las 15:18
  • Muchas gracias ! Con el combobox yo estaba usando el evento click y no el change. Gracias nuevamente.
    – Lucas. D
    el 4 nov. 2017 a las 15:21

Tu Respuesta

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

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