Limit Value of Input

Asked

Viewed 887 times

0

Hello,

have a input called expense, and the entered value may not be greater than 1,000.00, if it’s greater than 1,000.00 appears a modal onscreen.

Could you help me in how to make this javascript, please?

javascript html css
  • 2

    You know the attribute max? And what do you know about javascript? Have you tried something? What was the difficulty?

  • yes, I don’t want to do with max. I had made a script, but I deleted it because it was giving too much error

  • the idea would be for the person to type 1000.00 in the field and click the calculate button, and it appear the message, only an Alert after I turn here

  • 1

    Could you describe how you asked the question? Give us a basis of what you know, what your difficulty was, what mistakes they made, etc. As it stands, you seem to be asking us to do it for you. Why don’t you want to use max?

  • Ola carlos, the script is this https://jsfiddle.net/4npemgvq/

  • Editing the reversed question because the "new" question is completely different from the original, invalidating all current answers.

  • You must use Event.preventDefault() to prevent Ubmit, and use the form’s Ubmit instead of the https://jsfiddle.net/7kr1g4md/1 button click/

Show 2 more comments

3 answers

3

You can use the addEventListener(), from there you can take the value and make the check:

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

Any doubt I’m available!

Source: Pure Javascript Listen to input

1

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

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

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

I hope I helped and welcome to stackoverflow!

1


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

If the input is comma, you have to replace the comma by period to be able to compare

$(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>
<link rel="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>	

<form name="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 method preventDefault, that as the name already gives idea, prevents the default behavior of the object, ie cancels the behavior that elements usually have on the page, then, in this case, prevents the click of the button submit the form

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.