How to show a price according to which items of several selects are selected with Javascript?

Question

How to show a price according to which items of several selects are selected with Javascript?

Navigation

#1 by (1 votes)

1

I have a form to know a budget according to which options of 3 selects the users choose.

javascript

asked by Harles Pereira 22.06.2018 в 03:09

source

1 answer

Query all of a user's sales with totals how to make a mysqli function for a search engine?

score 1 · Accepted Answer

You can simply create a boolean flag that I have called selStatus where you evaluate the value of both select . It will be true only when they have the values you indicate and will show the price, otherwise no.

$("#enviar").hide();

function calcularPrecio() {
  var selStatus = $("#milimetraje").val() == "8mm" &&
    $("#color").val() == "Gris";
  if (selStatus) {
    $('#precio').html("450$");
    $("#enviar").show();
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="col-md-12 text-center seccion-calculadora">
  <p>Ingrese sus valores para obtener un presupuesto <b id="aproximado-texto">apróximado</b></p>
  <div class="container">
    <form action="" method="post" role="form" id="formulario-presupuesto">
      <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-2"></div>
      </div>
      <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-4 col-xs-12">
          <input type="text" name="nombre" placeholder="Nombre">
        </div>
        <div class="col-md-4 col-xs-12">
          <input type="text" name="telefono" placeholder="Teléfono">
        </div>
        <div class="col-md-2"></div>
      </div>

      <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-4 col-xs-12">
          <input type="email" name="email" placeholder="Correo">
        </div>
        <div class="col-md-4 col-xs-12">
          <input type="text" name="ciudad" placeholder="Ciudad">
        </div>
        <div class="col-md-2"></div>
      </div>

      <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-4 col-xs-12">
          <select class="form-control" name="abertura" id="abertura" required>
            <option disabled selected>¿Que servicio le interesa?</option>
            <option value="Ventana Corrediza">Ventana Corrediza</option>
            <option value="Puerta Corrediza">Puerta Corrediza</option>

          </select>
        </div>
        <div class="col-md-4 col-xs-12">
          <select class="form-control" name="milimetraje" id="milimetraje" required>
            <option disabled selected>Milimetraje</option>
            <option value="10mm">10 mm (Milimetros)</option>
            <option value="8mm">8 mm (Milimetros)</option>
          </select>
        </div>
        <div class="col-md-2"></div>
      </div>

      <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-4 col-xs-12">
          <select class="form-control" name="color" id="color" required>
            <option disabled selected>Escoja el color</option>
            <option value="Incoloro">Incoloro</option>
            <option value="Bronce">Bronce</option>
            <option value="Gris">Gris</option>
          </select>
        </div>
        <div class="col-md-2 col-xs-12">
          <input type="text" name="largo" id="largo" placeholder="Largo">
        </div>

        <div class="col-md-2 col-xs-12">
          <input type="text" name="ancho" id="ancho" placeholder="Ancho">
        </div>
        <div class="col-md-2"></div>
      </div>

      <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-4">
          <div class="col-md-12 div-precio">
            <p id="precio" data-placeholder="Precio apróximado"></p>
          </div>
        </div>
        <div class="col-md-4">

          <button class="btn btbn-succes btn-calcular" type="button" onclick="calcularPrecio()">Calcular precio</button>

        </div>
        <div class="col-md-2"></div>
      </div>

      <div class="row-col-md-12 text-center">
        <input type="submit" value="Solicitar presupuesto" name="submit" id="enviar" class="btn-enviar">
      </div>
    </form>