3

Quisiera saber como hacer para manipular el max y min de un input desde javascript, soy nuevo en esto y tengo muchas dudas aun...el punto es mediante un select al momento de elegir una opción los atributos del max y min cambien..

const loanForm = document.getElementById('calculate-loan-form')
loanForm.addEventListener('submit', function (e) {
  e.preventDefault()
  start_loader();

  const interest = document.getElementById('loan-interest').value;
  const principalAmount = document.getElementById('loan-amount').value;
  const PayableYears = document.getElementById('loan-years').value;
  
  /////////////////////////////////////////// ATRIBUTOS DE MONTO/////////////////////////////////
  var iva = .16,
    input = document.getElementById("loan-amount");

  if (interest == 27) {//ORDINARIO
    input.setAttribute("max", 5000000);
    input.setAttribute("min", 600);
  } else if (interest == 18) {//CREDICONFIANZA
    input.setAttribute("max", 150000);
    input.setAttribute("min", 600);
  } else if (interest == 22.80) {//TEMPORADA
    input.setAttribute("max", 40000);
    input.setAttribute("min", 600);
  } else if (interest == 13.80) {//TU AUTO
    input.setAttribute("max", 700000);
    input.setAttribute("min", 25000);
  } else if (interest == 11.40) {//TU CASA
    input.setAttribute("max", 2000000);
    input.setAttribute("min", 100000);
  }
})
<div class="form-group">
  <label for="loan-interest"><b>SELECCIONE EL TIPO DE CRÉDITO</b></label>
  <select class="form-select" name="loan-interest" id="loan-interest"
          placeholder="INGRESE EL MONTO DESEADO" class="input-item text-right"
          required>
    <option value="">SELECCIONE</option>
    <option value="27">ORDINARIO</option>
    <option value="18">CREDICONFIANZA</option>
    <option value="22.80">TEMPORADA</option>
    <option value="13.80">TU AUTO</option>
    <option value="11.40">TU CASA</option>
  </select>
</div>
<div class="form-group">
  <label for="loan-amount"><b>MONTO</b></label>
  <input type="number" step="1" value="600" min='input' max="input" name="loan-amount"
         id="loan-amount"
         class="form-control" required>
</div>

Lo que quiero lograr es que los atributos max y min del input "MONTO"se actualicen al seleccionar una opción del select

al hacerlo así una vez enviado el formulario no me valida el input sino hasta la segunda vez que lo envió

2

1 respuesta 1

2

El problema se debe a que estas modificando el min y max del <input después de evento submit del formulario.

Solución:

Podrías hacer lo siguiente:

  • (Opcional) Crear un objeto con la configuración de los limites min y max según el tipo de crédito seleccionado.
  • Suscribir una función al evento change del <select.
    Cuando el usuario modifique la selección entonces ahí establecemos el min y max en base a la opción seleccionada.

Ejemplo:

const interest = document.getElementById('loan-interest');
const amount = document.getElementById("loan-amount");
const loanForm = document.getElementById('calculate-loan-form');
const interestMinMax = {
  '27': {min: 600, max: 5000000}, // ORDINARIO
  '18': {min: 600, max: 150000}, // CREDICONFIANZA
  '22.80': {min: 600, max: 40000}, // TEMPORADA
  '13.80': {min: 25000, max: 700000}, // TU AUTO
  '11.40': {min: 100000, max: 2000000},// TU CASA
  'default': {min: 0, max: 0}
};

interest.addEventListener('change', function(e) {
  const config = interestMinMax[interest.value] || interestMinMax.default;

  amount.min = config.min;
  amount.max = config.max;
});

loanForm.addEventListener('submit', function(e) {
  e.preventDefault();

  // resto del código...
});
<form id="calculate-loan-form">
  <div class="form-group">
    <label for="loan-interest"><b>SELECCIONE EL TIPO DE CRÉDITO</b></label>
    <select class="form-select" name="loan-interest" id="loan-interest" placeholder="INGRESE EL MONTO DESEADO" class="input-item text-right" required>
      <option value="">SELECCIONE</option>
      <option value="27">ORDINARIO</option>
      <option value="18">CREDICONFIANZA</option>
      <option value="22.80">TEMPORADA</option>
      <option value="13.80">TU AUTO</option>
      <option value="11.40">TU CASA</option>
    </select>
  </div>
  <div class="form-group">
    <label for="loan-amount"><b>MONTO</b></label>
    <input type="number" step="1" value="1" min='0' max="0" name="loan-amount" id="loan-amount" class="form-control" required>
  </div>
  <button>Enviar</button>
</form>

1
  • Excelente, muchas gracias por el apoyo ya realice tal cual me has asesorado y me funciono, muchas gracias.
    – Juan Casas
    el 16 jun. a las 22:56

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.