How to multiple (a*b) two input text value and show it Dynamicly with text change in javascript?

Question

i want to show the money that customer must pay and my inputs are like this :

<input type="text" class="form-control" placeholder="cost " id="txt" name="credit">

<input type="text" class="form-control" placeholder="quantity" id="txt" name="limit">

when the input text is changing i want to show the total cost (quantity*cost) in a <p> tag Dynamicly how can it be with javascript?

an example of what you tried would be usefull. There are many solutions to that problem, some involve libraries, some others don't — Regis Portalez, May 09 '16 at 11:29
get the value from input field. convert it to number.then multiply — Madhawa Priyashantha, May 09 '16 at 11:29
i dont know how to write js i just can use it can you write it for me plz ? :D @FastSnail — hope, May 09 '16 at 11:30
@RegisPortalez i cant write js but i told what i want i want to cost*quantity then show it in a
tag and iwant it to be dynamic for example when u change quantity input or cost input the value of
tag change — hope, May 09 '16 at 11:33
if you can't write js, it will be hard... have a look on that: http://stackoverflow.com/questions/16483560/how-to-implement-dom-data-binding-in-javascript — Regis Portalez, May 09 '16 at 11:35
For the record, id's should be unique, so you can't have both inputs have 'txt' as their id. Switch name and id values around or something. — Shilly, May 09 '16 at 11:35
I don't have any flag remaining: can please someone flag that as "do my job plz" ? — Regis Portalez, May 09 '16 at 11:37
I'm voting to close this question as off-topic because Stack Overflow is not a free code writing service. — Mike Cluck, May 09 '16 at 16:23

score 2 · Answer 1 · answered May 09 '16 at 11:34

You can try this:

<input type="text" class="form-control" placeholder="cost " id="credit" name="credit" onchange="calculate()">
<input type="text" class="form-control" placeholder="quantity" id="limit" name="limit" onchange="calculate()">
<p id="result"></p>

And javascript part:

function calculate() {
   var cost = Number(document.getElementById("credit"));
   var limit = Number(document.getElementById("limit"));

   document.getElementById("result").innerHTML= cost*limit;

}

You must ensure you entered numbers in inputs.

score 1 · Answer 2 · edited May 09 '16 at 12:03

Try this:

  <script >
 function myFunction() {
document.getElementById('totalcost').innerHTML = document.getElementById('txt').value * document.getElementById('txt2').value;}
</script>

Also, change your HTML to this:

              <input type="text" onkeypress="myFunction()"  onkeyup="myFunction()" onclick="myFunction()" onmousemove="myFunction()" class="form-control" placeholder="cost " id="txt" name="credit">
            <input type="text" onkeypress="myFunction()" onkeyup="myFunction()" onclick="myFunction()" onmousemove="myFunction()" class="form-control" placeholder="quantity" id="txt2" name="limit">

Enter cost and quantity.

Note the change with the second input: id='txt' was changed to id='txt2'. This is because no 2 elements can have the same id.

Note: Untested.

score 1 · Answer 3 · answered May 09 '16 at 11:39

Hope this will be useful

// get cost field
var _cost = document.getElementById("cost");
_cost.addEventListener('keyup',function(event){
updateCost()
})

// get quantity field
var _quantity = document.getElementById("quantity");
_quantity.addEventListener('keyup',function(event){
updateCost()
})


function updateCost(){
var _getCost = document.getElementById("cost").value;
var _getQuantity = document.getElementById("quantity").value;
var _total = _getCost*_getQuantity;
console.log(_total);
document.getElementById("updateValue").textContent = ""; // Erase previous value
document.getElementById("updateValue").textContent = _total // update with new value
}

jsfiddle

score 1 · Answer 4 · answered May 09 '16 at 11:41

In case you consider using JQuery I've made this fiddle.
See if it works for you. https://fiddle.jshell.net/9cpbdegt/

$(document).ready(function() {

  $('#credit').keyup(function() {
    recalc();
  });

  $('#limit').keyup(function() {
    recalc();
  });

  function recalc() {
    var credit = $("#credit").val();
    var limit = $("#limit").val();
    var result = credit * limit;

    $("#result").text(result);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" placeholder="cost " id="credit" name="credit" value="0">x
<input type="text" class="form-control" placeholder="quantity" id="limit" name="limit" value="0">

<p id="result">0</p>

score 1 · Accepted Answer · answered May 09 '16 at 12:06

1

All of the above will generate errors if both the boxes are blank . Try this code , its tested and running .

<script>

function calc()
{
    var credit = document.getElementById("credit").value;

    var limit = document.getElementById("limit").value; 

    if(credit == '' && limit != '')
    {
        document.getElementById("cost").innerHTML = parseInt(limit);
    }
    else if(limit == '' && credit != '')
    {
        document.getElementById("cost").innerHTML = parseInt(credit);
    }
    else if(limit!= '' && credit!= '')
    {
        document.getElementById("cost").innerHTML = parseInt(limit) * parseInt(credit);
    }
    else
    {
        document.getElementById("cost").innerHTML = '';
    }
}
 </script>

</head>

<input type="number" value="0" min="0"  class="form-control" placeholder="cost" id="credit" name="credit" onkeyup="calc();">

<input type="number" value="0" min="0"  class="form-control" placeholder="quantity" id="limit" name="limit" onkeyup="calc();">


<p id="cost"></p>

answered May 09 '16 at 12:06

Megan Fox

435
2
6
20

all of above are examples of code to help user reach the goal, it's expected that user can handle with errors, or then we are doing the job. – Ricardo Pontual May 09 '16 at 14:07
you're assuming that both numbers are "int", and what about the decimals? – Ricardo Pontual May 09 '16 at 14:21
You have also assumed that user will input numbers , what about other data types? Well taking your words the text boxes can be changed to text instead of numbers then .. – Megan Fox May 09 '16 at 14:32
That was good but i customized 1 of the answers and it worked good but tnx very muchhh – hope May 10 '16 at 12:54

How to multiple (a*b) two input text value and show it Dynamicly with text change in javascript?

5 Answers5