1

Tengo un formulario para conocer un presupuesto de acuerdo a que opciones de 3 selects escogan los usuarios. Como ven en la imagen, ese es mi formulario, hay 3 selects, "Que servicio le interesa" - "Milimetraje" y "Color"

Lo que me gustaria hacer con javascript es un if que si por ejemplo en el select de servicio esta seleccionado la opcion "Ventana" y que en el select de Milimetraje este seleccionada la opcion "8mm" y que en el ultimo select de Color este seleccionada la opcion "Gris", al apretar el boton de Solicitar Presupuesto, muestre un precio en un div debajo de 450$. Alguna idea?

Lo que he intentado es muy de novato porque no domino aun javascript,

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

function calcularPrecio() {


    if ($("#milimetraje option[value='8mm']").attr('selected') && $("#color option[value='Gris']").attr('selected')) {
            $('#precio').html("450$");
            $("#enviar").show();
}

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

2
  • te saludo y te doy la bienvenida, aprovecho a comentarte que la dinámica dle sitio es apoyar en dudas de código mostrado y partir de ahí
    – user75901
    el 22 jun. 2018 a las 1:11
  • Hola! Agradeceríamos mucho si puedes agregar lo que haz intentado (js funcionales y no funcionales de tu página, html) para poder ayudarte :)
    – Killbunny
    el 22 jun. 2018 a las 1:14

1 respuesta 1

1

Puedes simplemente crear una bandera booleana que he llamado selStatus donde evalúes el valor de ambos select. Será true solamente cuando tengan los valores que indicas y mostrará el precio, de lo contrario 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>

1
  • Genial, funciono! Gracias! el 22 jun. 2018 a las 17:35

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.