CODEWITHSUNDEEP
javascriptphphtml
Rodave
Rodave

Reputation: 13

Automatic subtract number without button click based on input using javascript or PHP

I have more than 2 inputs that can only accept numbers and there is a displayed number on the top. How could I subtract the numbers that I have entered just by changing the value on any of the input boxes? Please Help. 

 <p id='Answer'> 100 </p>
 <input type='number' max='10' min='0' name='num1'>
 <input type='number' max='5' min='0' name='num2'>

Upvotes: 0

Views: 4940

Answers (3)

Abdul
Abdul

Reputation: 159

Try this code. It works cool.

<p id='Answer'> 100 </p>
<input type='number' max='10' min='0' id='num1' value="0">
<input type='number' max='5' min='0'  id='num2' value="0">

<script>

    $("#num2").keyup(function(){
        $("#answer").html('');
        var n1 = $("#num1").val();
        var n2 = $("#num2").val();
        var ans = n1 - n2;
        $("#answer").html(ans);
    }); 
    $("#num1").keyup(function(){
        $("#answer").html('');
        var n1 = $("#num1").val();
        var n2 = $("#num2").val();
        var ans = n1 - n2;
        $("#answer").html(ans);
    });
</script>

Pls check this http://jsfiddle.net/P7FNs/2/

Upvotes: 2

Saad Bashir
Saad Bashir

Reputation: 4519

Ok your question is a little ambiguous. Anyway I have assumed you want the following. You want the num1 to subtract automatically from num2 and be displayed in id='Answer'.

Following is the code to that in jQuery.

$(".sub").focusout(function() {
  $("#answer").html('');
  var num1 = $("#num1").val();
  var num2 = $("#num2").val();
  var answer = num1 - num2;
  $("#answer").html(answer);
});

You can view the demo here

In case you want both input fields to subtract from 100. Following is the code.

$(".sub").focusout(function() {
$("#answer").html('');
var num1 = $("#num1").val();
var num2 = $("#num2").val();
var answer = 100 - num1 - num2;
$("#answer").html(answer);
});

And following is the link to demo

Based on your question in last comment. Download jquery from here. Now include the downloaded script in your header. Or just use the following code.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

After you have included jquery you need to use your .focusout code like stated below

<script type="text/javascript">
$(document).ready(function() {
   $(".sub").focusout(function() {
     $("#answer").html('');
     var num1 = $("#num1").val();
     var num2 = $("#num2").val();
     var answer = 100 - num1 - num2;
     $("#answer").html(answer);
    });
});
</script>

Upvotes: 1

arnold.NET.JS
arnold.NET.JS

Reputation: 86

<p id='Answer'> 100 </p>
<input type='number' max='10' min='0' id='num1' value="0">
<input type='number' max='5' min='0'  id='num2' value="0">

<script>
    var input1_ = document.getElementById('num1');
    var input2_ = document.getElementById('num2');
    var answer = document.getElementById('Answer');
    function sub(){
        answer.innerHTML = (parseInt(input1_.value) - parseInt(input2_.value));
    }
    document.getElementById('num1').onkeyup = function () {
        sub();
    };
    document.getElementById('num2').onkeyup = function () {
        sub();
    };
</script>

Upvotes: 0

Related Questions