Javascript Equation Result is not showing after click on increment/decrement button

Question

Well, I've a javascript tools where I can calculate percentage(%) of a sum(e.g 10,000). It's working when I put value(e.g 10,000) and percentage(e.g 10%) but problem is, I just added a increment and decrement button so user don't have to write 10,000, 30,000 etc. They can use my increment and decrement button. Unfortunately after press on increment and decrement button the Result is not showing. If i put the number manually then It's working.

Live Tools:

http://propertyjungle.com.au/tools.php

Javascript Code:

<script>
function incrementValue()
{
    var value = parseInt(document.getElementById('pvalue1').value, 10);
    value = isNaN(value) ? 0 : value;
    value +=10000
    document.getElementById('pvalue1').value = value;
}

function decrementValue()
{
    var value = parseInt(document.getElementById('pvalue1').value, 10);
    value = isNaN(value) ? 0 : value;
    value -=10000
    document.getElementById('pvalue1').value = value;
}

function toggleIncrement()
{
    var value = parseFloat(document.getElementById('pvalue2').value, 10);
    value = isNaN(value) ? 0 : value;
    value +=0.1
    document.getElementById('pvalue2').value = value;
}

function toggleDecrement()
{
    var value = parseFloat(document.getElementById('pvalue2').value, 10);
    value = isNaN(value) ? 0 : value;
    value -=0.1
    document.getElementById('pvalue2').value = value;
}

jQuery(document).ready(function () {
    $('#pvalue1').change(function () {
        var agentfee = parseFloat($('#pvalue1').val(), 10) * parseFloat($('#pvalue2').val(), 10) / 100;
        $('#pvalue3').val(agentfee);

        var percentagereduce = parseFloat($('#pvalue2').val(), 10) - 0.1;
        var newvalue = parseFloat($('#pvalue1').val(), 10) * percentagereduce / 100;
        $('#pvalue4').val(newvalue);
        var takevalue1 = parseFloat($('#pvalue3').val(), 10);
        var takevalue2 = parseFloat($('#pvalue4').val(), 10);
        var finalvalue = takevalue1 - takevalue2;
        $('#pvalue5').val(finalvalue);
    });
    $('#pvalue2').change(function () {

        var agentfee = parseFloat($('#pvalue1').val(), 10) * parseFloat($('#pvalue2').val(), 10) / 100;
        $('#pvalue3').val(agentfee);

        var percentagereduce = parseFloat($('#pvalue2').val(), 10) - 0.1;
        var newvalue = parseFloat($('#pvalue1').val(), 10) * percentagereduce / 100;
        $('#pvalue4').val(newvalue);
        var takevalue1 = parseFloat($('#pvalue3').val(), 10);
        var takevalue2 = parseFloat($('#pvalue4').val(), 10);
        var finalvalue = takevalue1 - takevalue2;
        $('#pvalue5').val(finalvalue);
    });
});
</script> 

Html code:

<table>
<tr>
    <td>House Sale Price:</td>
    <td>$<input name="pvalue1" onkeypress="validate(event)" value="" placeholder=" Enter Sale Price" style="width:140px;" type="number" value="<?=$pvalue1?>" id="pvalue1" size="20" class="required inputfield2" required ></td>
    <td><input type="button" onClick="incrementValue()" value="+" /><input type="button" onClick="decrementValue()" value="-" /> </td>
</tr>
<tr>
    <td>Rate quoted by agent:</td>
    <td>&nbsp;&nbsp;<input name="pvalue2" onkeypress="validate(event)" value="0" placeholder=" Percentage" style="width:140px;" type="number" value="<?=$pvalue2?>" id="pvalue2" size="20" class="required inputfield2" required >%</td>
    <td><input type="button" onClick="toggleIncrement()" value="+" /><input type="button" onClick="toggleDecrement" value="-" /></td>
</tr>
</table>  

<h2>Results</h2>
<table>
<tr><td>Agent Fees:</td><td>$<input name="pvalue3" value="0" placeholder="" type="number" value="<?=$pvalue3?>" id="pvalue3" size="10" class="resultfield"  ></td></tr>
<tr><td></td><td><div id='show-me' style='display:none'><input name="pvalue4" value="0" placeholder="" type="number" value="<?=$pvalue4?>" id="pvalue4" size="10" class="resultfield"  ></div></td></tr>
<tr><td>Reducing the rate the agent is charging by 0.1% will save you: </td><td>$<input name="pvalue5" value="0" placeholder="" type="number" value="<?=$pvalue5?>" id="pvalue5" size="10" class="resultfield"  ></td></tr>
</table>

Answer 1

This is happening because changing the value of a field does not trigger the change event: Why does the jquery change event not trigger when I set the value of a select using val()?

If you don't feel like refactoring all of your code, you could simply trigger the jQuery change event, which would then run the calculations:

function toggleIncrement(){
    ...
    $("#pvalue1").trigger("change");
}

function toggleDecrement(){
    ...
    $("#pvalue1").trigger("change");
}

...

Example.