0

Primero que nada, lo siento, soy nuevo en programación y se que el siguiente código tiene errores. La idea de este código es que el usuario seleccione una opción del Select, cada una tiene un valor máximo. Luego de eso el usuario debe ingresar en un input number un valor numérico, el cual no debe ser mayor que la opción que seleccionó anteriormente (ahí los scripts deberían impedirle que ingrese un numero mayor). El código correcto debería ser algo así:

function cboc(){ 
  var maxvalGORE = parseInt("0");

      if(cb == 0){
        maxvalGORE = 0;
        if(cb == 15){
          maxvalGORE = 100;       
        }
        if(cb == 16){
          maxvalGORE = 200;
        }
      }
} 
        
function cbocc(){ 
    var val = null;
    var x = document.GetElementById('txtprepos').value;

    val = parseInt(x); 

    if(val > maxvalGORE){
    alert('El valor es más alto que $' + maxvalGORE +'.'); 
    document.GetElementById('txtprepos').value = "";
    }    
}
<select style="width=5.5em;" name="cbotipfon" id="cbotipfon" onchange="cboc()">
            <option value="0">Seleccione</option>                                      
            <option value="15">Opción A</option>
            <option value="16">Opción B</option>                                  
</select>

<input type="number" onblur="cbocc()" name="txtprepos" id="txtprepos">

Si pudieran ayudarme estaría eternamente agradecido. Gracias de antemano y por tomarse la molestia de leer.

1
  • 1
    en tu funcion cboc() , está faltando una referencia al select, tal como haces en la función cbocc() , tienes que obtener el valor seleccionado y colocarlo en tu variable cb
    – FederHico
    Commented el 20 sept. 2018 a las 18:22

1 respuesta 1

0

Usando jQuery, podrías usar el handler change para detectar cuando el select es modificado e input cuando modificas el input, arme un ejemplo para poder explicarlo mejor

//Evento producido al cambiar la opción del select
$('.Ejemplo select').on('change',function()
{
  //Chequeo que se seleccione una opción
  if($(this).val() != undefined)
  {
    //Caso de cumplirse, busco el input y le quito la propiedad disabled
    $(this).closest('.Ejemplo').find('input').prop('disabled',false);
    //Obtengo el valor del select
    var selectVal = parseInt($(this).val());
    //Obtengo el valor del input
    var inputVal = parseInt($(this).closest('.Ejemplo').find('input').val());
    
    //Actúo en caso de que el input sea mayor que el select
    if(inputVal > selectVal)
    {
      //Hago el span visible
      $(this).closest('.Ejemplo').find('span').css('display','block');
      //Personalizo el error mostrado
      $(this).closest('.Ejemplo').find('span').text("El número no puede ser mayor que "+selectVal);
    }
    else
    {
      //Caso contrario, oculto el span.
      $(this).closest('.Ejemplo').find('span').css('display','none');
    }

  }
});


//Detecto cuando se escribe algo en el input
$('.Ejemplo input').on('input',function()
{
  //Obtengo el valor del input
  var inputVal = parseInt($(this).val());
  //Obtengo el valor del select
  var selectVal = parseInt($(this).closest('.Ejemplo').find('select').val());
  
  //Comparo
  if(inputVal > selectVal)
  {
    //Muestro el error
    $(this).closest('.Ejemplo').find('span').css('display','block');
    //Lo personalizo
    $(this).closest('.Ejemplo').find('span').text("El número no puede ser mayor que "+selectVal);
  }
  else
  {
    //Lo oculto en caso que sea correcto
    $(this).closest('.Ejemplo').find('span').css('display','none');
  }

});
.Ejemplo label
{
  display: block;
  margin-bottom: 0.5em;        
}
.Ejemplo span
{
  display:none;
  margin-top: 0.3em;
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Ejemplo">
<label for="combo">Seleccione una opción</label>
<select name="" id="combo">
    <option selected disabled>Seleccione una opción</option>
    <option value="10">Opción A (menor a 10)</option>
    <option value="20">Opción B (menor a 20)</option>
</select>
<!--El input sólo se habilitará si hay alguna opción en el select-->
<input type="text" disabled/>
<!--El span sólo se mostrará si hay un error-->
<span>Un error!</span>
</div>

Espero que te sea útil, saludos

2
  • La respuesta es perfecta para lo que necesito, pero todo está dentro de un archivo php y no sé como añadir el codigo jquery y a la vez llamarlo, he hecho un montón de intentos pero sin resultado Commented el 20 sept. 2018 a las 19:40
  • De preferencia da respuestas con tecnologías que use el OP. No es necesario jQuery para eso, con JavaScript basta. Saludos.
    – gugadev
    Commented el 20 sept. 2018 a las 19:41

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.