Fill an input depending on the value of another

Question

Fill an input depending on the value of another

Navigation

#1 by (1 votes)

0

I have the following html form which has a readonly "Base Price" field and I want to fill it with a value that will depend on the data that the other inputs have and then validate it with Javascript and Java (JSP, Servlets) to save them in a database.

<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>

For example, if the user enters the floor input value 1, then the base price will automatically be 2000, but if the user deletes the value 1 or changes the base price will change. I know ways to do it with a "Calculate Price" button but if there is any way that it would be automatic it would be more appropriate.

java javascript html

asked by Lucas. D 04.11.2017 в 15:08

source

1 answer

Install MySQL from the source code in Ubuntu Problem when calling a 3rd html file with ajax and Jquery

score 1 · Accepted Answer

You can add listeners to pisoOficina input via addEventListener to handle events onkeyup (changes by keyboard) and onMouseUp (click on spinner). Then, according to the value of the input, set the appropriate value in the input precioBaseOficina . You should also take into account the onchange of select that indicates if it is in front of a window, since when changing you should recalculate the value.

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>