Limit Input Value

Navigation
0

Hello,

I have an input called spent, and the value you entered can not be greater than 1,000,00 , if greater than 1,000,00 a modal appears on the screen.

Could you help me with how to do this javascript, please?

    
asked by anonymous 16.10.2018 / 12:45

4 answers

1
  

in this if($('#gasto').val() >= 1000.00){ leave the value as numeric

     

If the entry in the input is comma, you have to change the comma per point to make a comparison 

$(function() {
  $(".btn-gasto").click(function() {
         if($('#gasto').val() >= 1000.00){
              //alert('Para o seu consumo iremos tratar o seu orçamento e projeto de forma exclusiva. ');
              $("#myModal").modal('show');
              event.preventDefault();
                    
         } else{
             alert('menor que 1000.');
         }

  });
 return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><formname="calculadora" method='post' action='https://www.sunkit.com.br/resultado/'>
<input type="tel" id="gasto" name="gasto" placeholder="R$ 0.00" required>

<button type="submit" name="submit" class="btn-gasto">Calcular</button>
</form>

    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
           <div class="modal-content">
             <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal">&times;</button>
               <h4 class="modal-title">Consumo acima de R$1000.00 </h4>
             </div>
             <div class="modal-body">
               <p>Para o seu consumo iremos tratar o seu orçamento e projeto de forma exclusiva.</p>
             </div>
             <div class="modal-footer">
               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
             </div>
           </div>
        </div>
    </div>
  

The preventDefault method, which as the name already gives an idea, prevents the default behavior of the object, ie cancels the behavior that the elements usually have on the page, then in this case, prevents the button click from submitting the form

    
16.10.2018 / 16:01
2

You can use addEventListener() , from there you can get the value and do the verification: 

INPUT_OBJECT.addEventListener('input', function (evento) {
     alert(this.value);
});

Any questions are available!

Source: Pure JavaScript listen to input

    
16.10.2018 / 12:56
2

There is a simple and easy solution to your problem, using only html5 . 

<!DOCTYPE html>
<html>
<body>

<form>
<input type="number" required="true" name="price" min="0" max="1000.00" step=".01"> 
</form>

</body>
</html>

Explanation of tags

  • required: Make sure the element is filled in.
  • (min / max): Use the min attribute together with the max attribute to create a range of allowed values.
  • step: The step attribute specifies the legal numeric ranges for an element. if step="3", legal numbers can be -3, 0, 3, 6, etc. In our case: .01 to allow for decimal values.

    • If you want your input to have negative values, simply remove the min attribute.

    I hope to have helped and welcome to stackoverflow!

        
    16.10.2018 / 13:30
    -4

    Complementing the above answer: 

    INPUT_OBJECT.addEventListener('input', function (evento) {
     evento.preventDefault();

     if(parseFloat(this.value) > 1000.00){
     alert('O número é maior que 1000.00');
     } 
});

    You could call this function with onClick if you want to put it on a button.

        
    16.10.2018 / 13:02
    How to send html form to route node? Crud! Save Field Record Text Disabled AJAX + PHP