Cómo habilitar el botón, cuando se ingresó la cantidad real
digamos que tengo 100 mínimo y 200 máximo
quiero que cuando el usuario ingrese una cantidad por debajo de 100, el error sea la cantidad real necesaria y el botón permanezca inhabilitado
cuando el usuario ingresa más de 200, hace el mismo error de eco
el usuario debe ingresar 100 y más, pero no exceder el máximo
<form method="post"> <input type="text" id="Textfield"> <button type="submit" class="disabledButton" disabled>Submit</button> <p id="error"></p> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $('#Textfield').keyup(function(){ var textBox = $('#Textfield').val(); if((textBox >= 100) || (textBox <= 200) ){ $('.disabledButton').prop("disabled", false); } else { $('#error').text('actual amount needed'); return false; } }); </script>Si está utilizando html 5, no necesita JavaScript. La mejor manera de hacer esto es establecer este campo en un número, como
<input type="number" min="100" max="200" placeholder="value in 100-200" id="Textfield" />Al establecer valores mínimos y máximos, el formulario no se enviará si el valor en este campo no está en ese rango
Hay varias razones por las que su código no funciona:
.val() siempre es texto, por lo que está (estaría) comparando "15" con 100 y 200 y pasaría, se convertiría en un número enteroEl problema principal es:
if((textBox >= 100) || (textBox <= 200) ){si el valor del cuadro de texto es mayor que 100 O es menor que 200, bueno, todos los valores siguen esta regla: por ejemplo, 1 es menor que 200, entonces pasa, 3000 es más que 100, entonces pasa.
Esto debería ser
if((textBox >= 100) && (textBox <= 200) ){Dando fragmento actualizado:
$('#Textfield').keyup(function() { var textBox = $('#Textfield').val() * 1; if ((textBox >= 100) && (textBox <= 200)) { $('.disabledButton').prop("disabled", false); $('#error').text('ok'); } else { $('.disabledButton').prop("disabled", true); $('#error').text('actual amount needed'); } }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <form method="post"> <input type="text" id="Textfield"> <button type="submit" class="disabledButton" disabled>Submit</button> <p id="error"></p> </form> $('#Textfield').on('keyup',function(){ //every time a key is pressed we count the total number of characters in the field var charLength = $(this).val().length; //if they are equal to or above 100 and equal to or below 200 we disable the disabled button property else we disable the button again if(charLength >= 100 && charLength <= 200){ $('.disabledButton').prop('disabled',false) }else{ $('.disabledButton').prop('disabled',true) } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form method="post"> <input type="text" id="Textfield"> <button type="submit" class="disabledButton" disabled>Submit</button> <p id="error"></p> </form>