CODEWITHSUNDEEP
javascript
Uchsun
Uchsun

Reputation: 361

Discount with event (onChange) Javascript not work?

I have Create Discount with Javascript, this the Script

    <script>

            function hitung()
                  {
                    var x = document.getElementById('TOTAL').value;
                    var y = document.getElementById('DISKON').value;  

                    var besarDiskon = x * (y/100);


                    var grandTotal = x - besarDiskon;

                    document.getElementById('GTOTAL').value = grandTotal;

                  } 

    </script>

    <input type='text' name='TOTAL' size='20' id='TOTAL' value='200000'>
    <input type='text' name='DISKON' size='20' id='DISKON' onChange='hitung()' placeholder='Diskon'>    
    <input type='text' name='GRANDTOTAL' size='20' id='GTOTAL' onChange='hitung()' placeholder='Grand Total'>

It Run Well, but the All I need is the Text Box value get data from mysql

<input type='text' name='TOTAL' size='20' id='TOTAL' value='<?php echo $data[TOTAL];?>'>

If I run that Script, the Result is NaN.

Can anyone help me for this Problem.

Im very appreciatedn your answer

Thanks

Upvotes: 1

Views: 240

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206121

live demo

HTML (just remove inline JS):

<input type='text' name='TOTAL' size='20' id='TOTAL' value='200000'>
<input type='text' name='DISKON' size='20' id='DISKON' placeholder='Diskon'>    
<input type='text' name='GRANDTOTAL' size='20' id='GTOTAL' placeholder='Grand Total'>

JS:

function el(id){return document.getElementById(id);}
var $tot = el("TOTAL");
var $dis = el("DISKON");
var $gto = el("GTOTAL");

function hitung(){
  var tv = parseInt($tot.value, 10);
  var dv = parseInt($dis.value, 10);  
  var besarDiskon = tv * (dv/100);
  var grandTotal = tv - besarDiskon;
  $dis.value = dv +'% (-'+ besarDiskon +')';
  $gto.value = grandTotal;
}

$dis.addEventListener("change", hitung, false);

Upvotes: 1

Related Questions