Удалить обработчик события onKeyup в полях ввода

У меня есть форма в админ-панели opencart, которая рассчитывает общую стоимость продукта и разбивает стоимость.

У меня есть 3 редактируемых поля и общее поле.

Все входы отработаны на KeyUp (это было разработано другим разработчиком)

Я сделал несколько кнопок, которые будут автоматически заполнять поля данными, но по способу его кодирования он вычисляет общее значение onKeyUp, теперь это означает, что если я нажму кнопку для автоматического заполнения данных, мне все равно придется щелкнуть поле и нажать любая кнопка (обычно Enter) для обновления всего поля.

Есть ли дескриптор события, который будет работать на лету, удаляя функцию onKeyUp и просто вычисляя итоговое значение, поэтому мне не нужно нажимать на поле после того, как я нажал кнопку?

<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>

1 ответ

Решение

Все, что вам нужно в вашем коде, это позвонить totalcost() Функция после установки значений после нажатия кнопки. Давайте предположим, что ваш <form> имеет идентификатор formтогда вы можете сделать это:

<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>

Обратите внимание на добавленные звонки totalcost() где я прохожу <form id="form"> селектор. Если ваша форма имеет другой идентификатор (или не имеет идентификатора вообще), обязательно настройте селектор (или <form> также).

Другие вопросы по тегам