CODEWITHSUNDEEP
javascript
gdjc
gdjc

Reputation: 53

JavaScript calculate % of number in <input> field

I have 2 input fields:

<input id="input1" etc />
<input id="answer" etc />

What I want to do is when a user types in a numerical value (and to restrict them to numbers, no letters or special characters) in "input1" then "answer" input field shows what 0.0015% is of that number (i.e. user types in 35000 so in the answer field it would show 52.5 as that's 0.0015% of the number they entered). This is to be done real time with no submit or calculate button.

How can I do this?

Upvotes: 1

Views: 1565

Answers (2)

A l w a y s S u n n y
A l w a y s S u n n y

Reputation: 38502

You can do this way to add keyup event on your first input element. I've used vanilla JS though you've used jquery on your fiddle. My fiddle,

function myFunction() {
  var inputVal = document.getElementById("input").value;
  var answerVal = document.getElementById("answer");
  var percentage = (0.0015/100) * parseInt(inputVal,10) * 100;
  if(inputVal !== ''){
     answerVal.value = (Math.round( percentage * 100 ) / 100).toFixed(1)
  }else{
  answerVal.value = '';
  }
}
input:<input id="input" type="number" onkeyup="myFunction()"/>
answer:<input id="answer" type="text" value=""/>

Upvotes: 1

Atul Rajput
Atul Rajput

Reputation: 4178

Your code is almost working perfectly, but it was not working in the given example by you and the reason for that is you have used parseint function of javascript which does not allow decimal values, and to restrict numbers you can use input type number.

		$(function(){
    
    $('#pointspossible').on('input', function() {
      calculate();
    });
    $('#pointsgiven').on('input', function() {
     calculate();
    });
    function calculate(){
        var pPos = $('#pointspossible').val(); 
        var pEarned = $('#pointsgiven').val();
        var perc="";
        if(isNaN(pPos) || isNaN(pEarned)){
            perc=" ";
           }else{
           perc = ((pEarned*pPos) / 100);
           }
        
        $('#pointsperc').val(perc);
    }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='number' id="pointspossible"/>
<input type='number' id="pointsgiven" />
<input type='text' id="pointsperc" disabled/>

Upvotes: 0

Related Questions