1

Buenas noches estimados! Estoy intentando validar si se cumplen un par condiciones en jquery o javascript pero no logro resolverlo.

Tengo un par de select,y quiero que al cumplirse la condición de que ambos valores selecionados coincidan para aplicar una formula y capturarla en una variable, este es mi html

<div id="input1" class="">
   <select name="formato" id="formato" class="form-control">
   <optgroup label="Impresion a Color">
       <option value='a'>Medio Pliego (90cm x 60cm)</option>
       <option value='b'>A2 (22"x34")</option>
       <option value='c'>Tabloide (11”x17”)</option>
   </select>  
   <select name="cantidad" id="cantidad" class="form-control" >
     <option value="">No. de copias...</option>
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
   </select>
</div>

y esto es lo que tengo

function valores() {
  if (document.addEventListener) {
    var medioPliegoColor = 1.75;
    var medioPliegoBN = 1.50;
    var a2Color = 3.00;
    var valormpColor;
    if  {
      valormpColor = a2Color * 2;
    } 
    if  {
      valormpColor = a2Color * 3;
    } 
    alert(valormpColor);
  }
}

valores();

En concreto mi duda es como expresar si se cumple la condiciones siguientes:

Si el valor de #formato es igual a 'a' y #cantidad es igual a "1"; entonces... valormpColor = medioPliegoColor * 1;

Si el valor de #formato es igual a 'a' y #cantidad es igual a "2"; entonces... valormpColor = medioPliegoColor * 2;

Y así asta cumplir las 9 condiciones. La lógica creo que la tengo, pero encontré problemas para expresar como deben compararse los campos para realizar la tarea.

Espero puedan ayudarme, estoy tratando de aprender y pues... ya batalle un buen rato :(

EDITO:

He logrado con la ayuda de ustedes subsanar esta parte del proyecto que estoy realizando, supongo que puede optimizarse el código, ya que aun me falta agregar info de ,as campos, ya que genero mas inputs dinámicamente.

Me ha quedado asi:

unction calcularPrecios() {

  if (document.addEventListener) {
    var medioPliegoColor = 1.75;
    var a2Color = 1.00;
    var medioPliegoBN = 1.50;
    var a2BN = 0.70;
    var tabloideColor = 0.50;
    var tabloideBN = 0.35;
    var valorArchivo1 = 0;
    var valorArchivo2 = 0;

  if (document.getElementById("formato").value === "Medio Pliego - Color") {
    if (document.getElementById("cantidad").value === "1") {
      var valorArchivo1 = medioPliegoColor * 1;
    } else if (document.getElementById("cantidad").value === "2") {
      var valorArchivo1 = medioPliegoColor * 2;
    } else if(document.getElementById("cantidad").value === "3") {
      var valorArchivo1 = medioPliegoColor * 3;
    }
  }

  if (document.getElementById("formato").value === "Medio Pliego - B/N") {
    if (document.getElementById("cantidad").value === "1") {
      var valorArchivo1 = medioPliegoBN * 1;
    } else if (document.getElementById("cantidad").value === "2") {
      var valorArchivo1 = medioPliegoBN * 2;
    } else if(document.getElementById("cantidad").value === "3") {
      var valorArchivo1 = medioPliegoBN * 3;
    }
  }

  if (document.getElementById("formato").value === "A2 - Color") {
    if (document.getElementById("cantidad").value === "1") {
      var valorArchivo1 = a2Color * 1;
    } else if (document.getElementById("cantidad").value === "2") {
      var valorArchivo1 = a2Color * 2;
    } else if(document.getElementById("cantidad").value === "3") {
      var valorArchivo1 = a2Color * 3;
    }
  }

  if (document.getElementById("formato").value === "A2 - B/N") {
    if (document.getElementById("cantidad").value === "1") {
      var valorArchivo1 = a2BN * 1;
    } else if (document.getElementById("cantidad").value === "2") {
      var valorArchivo1 = a2BN * 2;
    } else if(document.getElementById("cantidad").value === "3") {
      var valorArchivo1 = a2BN * 3;
    }
  }

  if (document.getElementById("formato").value === "Tabloide - Color") {
    if (document.getElementById("cantidad").value === "1") {
      var valorArchivo1 = tabloideColor * 1;
    } else if (document.getElementById("cantidad").value === "2") {
      var valorArchivo1 = tabloideColor * 2;
    } else if(document.getElementById("cantidad").value === "3") {
      var valorArchivo1 = tabloideColor * 3;
    }
  }

  if (document.getElementById("formato").value === "Tabloide - B/N") {
    if (document.getElementById("cantidad").value === "1") {
      var valorArchivo1 = tabloideBN * 1;
    } else if (document.getElementById("cantidad").value === "2") {
      var valorArchivo1 = tabloideBN * 2;
    } else if(document.getElementById("cantidad").value === "3") {
      var valorArchivo1 = tabloideBN * 3;
    }
  }

  if (document.getElementById("fileval2")) {
    if (document.getElementById("formato2").value === "Medio Pliego - Color") {
      if (document.getElementById("cantidad2").value === "1") {
        var valorArchivo2 = medioPliegoColor * 1;
      } else if (document.getElementById("cantidad2").value === "2") {
        var valorArchivo2 = medioPliegoColor * 2;
      } else if(document.getElementById("cantidad2").value === "3") {
        var valorArchivo2 = medioPliegoColor * 3;
      }
    } 
  } // sigue asta finalizar...
    pagoTotal = valorArchivo1 + valorArchivo2;
    document.getElementById("total").value = eval(pagoTotal).toFixed(2);

  }
}

Al final logré introducir el calculo en otro input con esta línea:

document.getElementById("total").value = eval(pagoTotal).toFixed(2);

Me queda el tema de agregarle funcionalidad a un checkbox que aumentará la suma en virtud de si estará seleccionado o no, parece que lo tengo pero si regreso a editar los campos estando seleccionado el checkbox este resta nuevamente la cantidad y respues me funciona a la inversa.

$('#panic').click(function(){
    if($(this).is(':checked')){
      document.getElementById("total").value = eval(Number(document.getElementById("total").value) + 5).toFixed(2);
    } else {
      document.getElementById("total").value = eval(Number(document.getElementById("total").value) - 5).toFixed(2);
    }
});

Supongo que debo meterlo dentro de la funcion calcularPrecios y alguna condicional.

6
  • Te felicito por poner codigo y realizar una buena pregunta, normalmente los usuarios nuevos creen que este es un sitio en el que se responden a dudas basadas en opiniones o creen que somos adivinos y no ponen ningun codigo, o esperan a que les hagamos las cosas, en tu caso no es asi y nos demuestras que hay personas que si se estan tomando de verdad en serio la programacion, o por lo menos en tu caso es asi, de todas maneras por si las moscas (no que lo necesites), se le recomienda normalmente a nuevos usuarios leer los siguientes enlaces: el recorrido de bienvenida y Cómo preguntar, por si deseas leerlos.
    – Layer
    Commented el 13 jun. 2020 a las 2:34
  • Se agradece el comentario, siempre hay que tratar de hacer bien las cosas, en lo que cabe
    – Elboy
    Commented el 13 jun. 2020 a las 3:33
  • De hecho amigo, creo que mi codigo acortaria todo ese codigo que tienes para hacer diferentes operaciones en diferentes casos, lo unico que tendrias que hacer segun mi solucion, es, en vez de usar ese monton de ifs que tienes (excepto el primero), guardar en la variable valorArchivo1 por ejemplo, el valor de la variable valormpColor que se calcula en la funcion valores de mi codigo, puesto que ella contiene cualquier posible resultado dinamicamente de todos esos if que estas haciendo, para valorArchivo2 realmente no se si te refieres a otro select con un grupo de options.
    – Layer
    Commented el 13 jun. 2020 a las 4:59
  • Si es asi seria un caso parecido, lo unico es que en vez de usar el select de valorArchivo1 usarias el otro select, por lo tanto cada uno tendria su onchange (una version cambiada de mi funcion valores que tengo en mi respuesta), adaptada a el segundo select con sus respectivos option, seria algo parecido a copiar y editar.
    – Layer
    Commented el 13 jun. 2020 a las 5:01
  • En efecto, valorArchivo2 corresponde a otro grupo igual, ya que agrego inputs tipo "file" y cada uno cuenta con esos select, la tarea es larga que que puede llegar a repetirse unas 10 veces "valorArchivo10". Voy a repasar tu código, aunque quisas lo haga mañana porque ya estoy en calidad de bulto jeje, gracias por tu ayuda.
    – Elboy
    Commented el 13 jun. 2020 a las 5:04

2 respuestas 2

1

Me parece que el inicio va bien, yo solo comentaré lo siguiente:

  • De cada uno de los select deberás evaluar se evento change
  • Por cada vez que el evento antes mencionado se dispare obtendrías el valor seleccionado por el usuario
  • Entonces obtenemos y asignamos en variables:
    • los 2 selects
    • Un botón que declararemos para comparar los valores recuperados
    • Dos variables que inicialmente estarán vacías
  • Dichas variables que están vacías las llenamos con el valor que obtenemos del evento change
  • Evaluamos el evento click del botón recién declarado
  • En la función que pasamos como segundo argumento de la acción mencionada en el paso anterior construiremos nuestros condicionales para evaluar si las variables que llenamos en el paso 4 cumplen con alguna de las 9 deseadas

Código propuesto:

<div id="input1" class="">
   <select name="formato" id="formato" class="form-control">
   <optgroup label="Impresion a Color">
       <option value="">-----------------</option>
       <option value='a'>Medio Pliego (90cm x 60cm)</option>
       <option value='b'>A2 (22"x34")</option>
       <option value='c'>Tabloide (11”x17”)</option>
   </select>  
   <select name="cantidad" id="cantidad" class="form-control" >
     <option value="">No. de copias...</option>
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
   </select>
    <button id="evalua">Evaluar condición</button>
</div>
<script>
  let formato   = document.getElementById("formato");
  let cantidad  = document.getElementById("cantidad");
  let condicion = document.getElementById("evalua");
  let formatoSeleccion  = '';
  let cantidadSeleccion = '';
      
  
  formato.addEventListener("change", () => {
    formatoSeleccion = formato.options[formato.options.selectedIndex].value
  })
  
  cantidad.addEventListener("change", () => {
    cantidadSeleccion = cantidad.options[cantidad.options.selectedIndex].value;
  })
  
  condicion.addEventListener("click", () => {
      if (cantidadSeleccion === "1" && formatoSeleccion === "a") {
        //acciones a realizar
      } else if (cantidadSeleccion === "2" && formatoSeleccion === "a") {
        //otras acciones a realizar
      }
      /*
      
      ................resto de tu lógica a través de condicionales
      */
  })
  
</script>
1
  • Gracias por la explicación amigo, veré como logro resolver el tema con sus respuetas, ya que soy varios temas en este proyecto, estaré molestando cada vez que me bloquee :)
    – Elboy
    Commented el 13 jun. 2020 a las 3:32
1

Te dare la introduccion a algo llamado eventos oyentes, un evento oyente no es mas que una función se encuentra ligada a un evento, evento el cuál puede ser nativo (existente de fabrica), o creado (se pueden crear eventos oyentes propios).

Para tu caso lo primero que te recomiendo, es que en vez de describir los valores a usar desde tu codigo javascript, los describas directamente en el HTML, por lo tanto, tu tienes tu codigo actualmente asi:

<option value='a'>Medio Pliego (90cm x 60cm)</option>
<option value='b'>A2 (22"x34")</option>
<option value='c'>Tabloide (11”x17”)</option>

Lo que yo te recomiendo que tengas es:

<option value='1.75'>Medio Pliego (90cm x 60cm)</option>
<option value='3.00'>A2 (22"x34")</option>
<option value='1.50'>Tabloide (11”x17”)</option>

Es decir, en los values en vez de poner a, b, c, poner el valor de cada opcion.

Una vez hecha esa pequeña modificacion, decir que te falto cerrar el optgroup, por lo que hay errores en el codigo, asi que no se te olvide en tu codigo cerrar el optgroup, miremos el ejemplo de uso de eventos oyentes que te habia comentado en tu codigo:

const medioPliegoColor = 1.75;
const medioPliegoBN = 1.50;
const a2Color = 3.00;

const formato = document.getElementById("formato");
const cantidad = document.getElementById("cantidad");

function valores() {
  if (document.addEventListener) {
    
    let valormpColor;
    
    const valorFormato = formato.options[formato.selectedIndex].value;
    const valorCantidad = cantidad.options[cantidad.selectedIndex].value;
    
    valormpColor = valorCantidad != "" ? valorFormato * valorCantidad : false;
    
    if(valormpColor){
      alert(valormpColor);
    }else{
      alert("No se selecciono la cantidad de copias!");
    }
    
  }
}

valores();
<div id="input1" class="">
   <select name="formato" id="formato" class="form-control" onchange = "valores()">
     <optgroup label="Impresion a Color">
         <option value='1.75'>Medio Pliego (90cm x 60cm)</option>
         <option value='3.00'>A2 (22"x34")</option>
         <option value='1.50'>Tabloide (11”x17”)</option>
     </optgroup>
   </select>
   
   <select name="cantidad" id="cantidad" class="form-control" onchange = "valores()">
     <option value="">No. de copias...</option>
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
   </select>
</div>

Te explico, la forma en la que yo use para ligar un evento oyente a los HTMLSelectElement de tu codigo es por medio del propio HTML, (esto se puede), es una de las tantas formas en las que puedes añadir eventos oyentes a un elemento HTML, (porque hay otras 2 formas de hacerlo mediante javascript), donde lo unico relevante que hay que recalcar es que para añadir un evento oyente que quede ligado a alguna funcion que tengas en el javascript, deberas:

  • Saberte o consultar el nombre del evento que quieres ligar y para que lo vas a usar.
  • En que casos ese evento oyente es aplicable (hay eventos oyentes que solo son aplicables a ciertos elementos, este es uno de esos casos).
  • Saber a que funcion de tu codigo javascript quieres ligar ese evento (el nombre de la funcion).

Mezclando toda esta información junta obtenemos lo siguiente:

<select name="formato" id="formato" class="form-control" onchange = "valores()">

Como vemos al final del HTML tenemos onchange, un atributo el cual anteriormente no teniamos en tu codigo original, el cual es simplemente "la vinculacion" con el evento oyente llamado change, que hace parte de ciertos input element de HTML.

Por lo tanto, para poder añadir por ejemplo un evento click a ese mismo select, lo que podriamos hacer es anteponer el prefijo on al evento con nombre click, de esta manera quedaria onclick:

<select name="formato" id="formato" class="form-control" onclick = "valores()">

Este ultimo es solo un ejemplo para poder que sepas que con solo anteponer la palabra on y saberte el nombre del evento vas a ligarlo con la ejecucion de alguna funcion que le especifiques, mas recuerda que el evento correcto en este caso es el evento change y no el evento click.

Tambien vemos que despues del igual tenemos dentro de comillas la ejecucion de una funcion, en este caso se trata de nuestra funcion llamada valores, la cual segun la definicion del evento change sera ejecutada cuando la seleccion actual del select haya cambiado.

Muy bien, entendamos ahora esta parte de aqui:

const formato = document.getElementById("formato");
const cantidad = document.getElementById("cantidad");

No es ningun misterio y no hay que explicar mucho, simplemente la funcion document.getElementById se encarga de obtener algun elemento HTML por su ID y luego este podremos guardarlo en javascript asignandoselo a algo.

Ahora bien, dentro de la funcion valores tenemos estas dos lineas:

const valorFormato = formato.options[formato.selectedIndex].value;
const valorCantidad = cantidad.options[cantidad.selectedIndex].value;

Recordemos que tanto las variables formato como cantidad son enrealidad elementos HTML guardados en unas constantes, estos elementos a su vez tienen ciertas propiedades, entre ellas puedes acceder a la propiedad options, las cuales hacen parte de ellos por ser ambos un HTMLSelectElement, asi que estariamos accediendo a sus hijos los options, options regresa un array, por lo tanto deberas acceder al option que te interesa (el que esta seleccionado actualmente) mediante formato.selectedIndex que te devuelve el indice del valor seleccionado el el select, por ultimo ya teniendo el option lo que hariamos es obtener su value para poder hacer operaciones con este.

Esto mismo se hace para el otro select que guardamos bajo el nombre de cantidad.

Por ultimo hay una linea que seguro no entenderas, y que te preguntaras:

Que demonios es esto?

es esta linea de aqui:

valormpColor = valorCantidad != "" ? valorFormato * valorCantidad : false;

Eso amigo mio, existe en muchos lenguajes de programacion, aunque curiosamente en python desgraciadamente no existe... eso de ahi se conoce bajo el nombre de condicional corta, o en ingles, shorthand conditional, su objetivo es acortar el codigo de condiciones que pueden ser escritas en pocas lineas de codigo.

donde ? representa la instruccion if y : representa la instruccion else, en un shorthand conditional no existe equivalente alguno de la condicion else if.

En pocas palabras lo que traduce esta linea:

valormpColor = valorCantidad != "" ? valorFormato * valorCantidad : false;

Si valor cantidad NO es igual a un string vacio, entonces multiplica el valor del formato por el valor de la cantidad (debido a que en el segundo campo tienes un campo con un string vacio), de lo contrario guardame false.

Es decir que dependiendo de esas condiciones, el valor que tendra la variable valormpColor será igual ya sea a valorFormato * valorCantidad o a false.

4
  • Gracias por tu explicación, muy completa, no se si es factible poner directos los valores en los campos, ya que los voy a quemar en un formulario, en el que tienen que ir los detalles de tipo de papel (que sustituiré por a, b, y c) y como tengo que agregar valores, el evento lo estoy capturando en un botón del formulario que me lanza a otra sección del form para verificar o editar los datos, es por eso que necesito que las selecciones vayan con su nombre y los valores almacenarlos en una variable, para despues sumar todas esas variables que ingresaré un otro campo input.
    – Elboy
    Commented el 13 jun. 2020 a las 3:29
  • Los valores en mi codigo igual los deje almacenados en variables para poder compararlos con los de tu formulario (aunque no hacia falta para mi ejemplo), respecto a lo de a, b, c, algo que te propongo seria en vez de usar en tu codigo los values de cada select, añadirle una clase mas a cada uno, la cual represente exactamente lo que usabas, de esta manera podras usar directamente la clase y a la vez el valor dejarlo con lo que se supone deberia valer cada option, ej: <option value='1.75' class = 'a'>, no cambiara mucho tu codigo, excepto que en vez de acceder al value accederias a la clase.
    – Layer
    Commented el 13 jun. 2020 a las 4:05
  • Es decir, usarias la clase para reconocerlos y los values para obtener el valor del option y posteriormente hacer las operaciones correspondientes en el codigo, recordar que para acceder a la clase de un elemento se debe usar: variableDondeGuardasElemento.className.
    – Layer
    Commented el 13 jun. 2020 a las 4:07
  • Gracias migo, he editado la antrada para agregar los avances, creo que voy por buen camino.
    – Elboy
    Commented el 13 jun. 2020 a las 4:51

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.