Remove onKeyup Event handler on input fields

Question

I have a form on an admin panel of opencart that will work out the total product costs and will break down the cost.

I have 3 editable fields and a total field.

The whole inputs are worked out onKeyUp (this was built by another developer).

I've made some buttons that will autofill the fields with data, but the way its coded, it works out the total onKeyUp, now that means if I click my button to auto fill data, I still have to click into a field and press any button (usually Enter) for it to update the total field.

Is there an event handle that will just work it out on the fly, removing the onKeyUp function and just working out the total so I don't need to click into a box after I've pressed a button?

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td nowrap="nowrap"><input onKeyUp="totalcost(this.form);" type="text" name="cost" value="<?php echo $cost; ?>" style="text-align:right; background-color: #ffd7d7; border: thin solid #999;" /></td>
    <td width="40" align="center" nowrap="nowrap">=</td>
    <td nowrap="nowrap"><input onKeyUp="totalcost(this.form); if(!this.value) this.value=0; totalcost(this.form);" id="cog" type="text" name="cost_amount" value="<?php echo $cost_amount; ?>" style="border: thin solid #999;" /></td>
    <td width="50" align="center" nowrap="nowrap"><?php echo $text_cost_or; ?></td>
    <td nowrap="nowrap"><input onKeyUp="totalcost(this.form); if(!this.value) this.value=0; totalcost(this.form);" id="perc" type="text" name="cost_percentage" maxlength="5" value="<?php echo $cost_percentage; ?>" style="border: thin solid #999;" />%</td>
    <td width="40" align="center" nowrap="nowrap">+</td>
    <td nowrap="nowrap"><input onKeyUp="totalcost(this.form); if(!this.value) this.value=0; totalcost(this.form);" id="podf" type="text" name="cost_additional" value="<?php echo $cost_additional; ?>" style="border: thin solid #999;" /></td>
    <td width="40" align="center" nowrap="nowrap">+</td>
    <td nowrap="nowrap" align="left"><div id="tabs"><a href="#tab-option"><?php echo $text_cost_option_cost; ?></a></div></td>    
  </tr>
  <tr>
    <td align="center" nowrap="nowrap"><span class="help"><?php echo $text_cost; ?></span></td>
    <td>&nbsp;</td>
    <td align="center" nowrap="nowrap"><span class="help"><?php echo $text_cost_amount; ?></span></td>
    <td>&nbsp;</td>
    <td align="center" nowrap="nowrap"><span class="help"><?php echo $text_cost_percentage; ?></span></td>
    <td>&nbsp;</td>
    <td align="center" nowrap="nowrap"><span class="help"><?php echo $text_cost_additional; ?></span></td>
    <td>&nbsp;</td>
    <td align="left" nowrap="nowrap"><span class="help"><?php echo $text_cost_option; ?></span></td>    
  </tr>

  <tr>
    <td>
        <input type="button" value="POD" id="pod" />
        <input type="button" value="STK" id="stk" />

        <script>
            $(function () {
            $('#pod').on('click', function () {
                var text = $('#perc');
                text.val(0); 
                var text = $('#cog');
                text.val(1.55);   
                var text = $('#podf');
                text.val(3.10);    
            });

            $('#stk').on('click', function () {
                var text = $('#perc');
                text.val(15); 
                var text = $('#cog');
                text.val(0);  
                var text = $('#podf');
                text.val(0);    
            });

             

        });

        </script>

    </td>
  </tr>

  
  </table>

Answer 1

All you need in Your code is to call the totalcost() function after setting the values after button click. Let's assume your <form> has an ID form, then you could do this:

<script type="text/javascript">
    $(function () {
        $('#pod').on('click', function () {
            var text = $('#perc');
            text.val(0);
            var text = $('#cog');
            text.val(1.55);
            var text = $('#podf');
            text.val(3.10);

            totalcost($('#form'));
        });

        $('#stk').on('click', function () {
            var text = $('#perc');
            text.val(15);
            var text = $('#cog');
            text.val(0);
            var text = $('#podf');
            text.val(0);
            text.val(3.10);

            totalcost($('#form'));
        });
    });
</script>

Note added calls to totalcost() where I am passing the <form id="form"> selector. If Your form has different ID (or does not have ID at all) make sure to adjust the selector (or <form> as well).