自动更改 2 个相关输入字段？

Question

我想修改我网站中的现有表格。相关表格允许我在我的管理面板上为我的一些文章在有限的时间内引入折扣价（见图）。 table 的数据通过 mysql 数据库填充。我正在使用开源电子商务软件 Opencart。

到目前为止，我只能在"prijs"栏中介绍不含税的价格。现在我添加了一个额外的列 "Pricevatinc"。目标是我还可以在 "Pricevatinc" 栏中介绍含税价格。 "prijs"（不含税）和 "pricevatinc"（含税）之间的比率仅为 1.21 的因数。

因此，如果我在 "Pricevatinc" 列中引入 100，那么 "price" 列应立即更改为 82.6446。同样，当我在 "prijs" 列中引入 100 时，"pricevatinc" 列应立即更改为 121。输入所有数据后，我将单击 "Bewaren" 按钮将所有数据保存到数据库中。

下面添加了我模板中现有的一段代码，但我不够熟练，无法用 javascript 或其他语言进行必要的修改。如果您可以查看我的代码并提出必要的更改建议或帮助我朝着正确的方向前进，我将非常高兴....

谢谢，萨布科

脚本代码：

    case 'specials': ?>
<div class="table-responsive">
    <table class="table table-striped table-bordered table-hover" id="specials">
        <thead>
            <tr>
                <td class="text-left"><?php echo $entry_customer_group; ?></td>
                <td class="text-right"><?php echo $entry_priority; ?></td>
                <td class="text-right"><?php echo $entry_price; ?></td>
                            <td class="text-right"><?php echo $entry_pricevatinc2; ?></td>
                <td class="text-left"><?php echo $entry_date_start; ?></td>
                <td class="text-left"><?php echo $entry_date_end; ?></td>
                <td width="1"></td>
            </tr>
        </thead>
        <tbody>
            <?php $special_row = 0; ?>
            <?php foreach ($product_specials as $product_special) { ?>
            <tr id="special-row<?php echo $special_row; ?>">
                <td class="text-left"><select name="product_special[<?php echo $special_row; ?>][customer_group_id]" class="form-control">
                        <?php foreach ($customer_groups as $customer_group) { ?>
                        <?php if ($customer_group['customer_group_id'] == $product_special['customer_group_id']) { ?>
                        <option value="<?php echo $customer_group['customer_group_id']; ?>" selected="selected"><?php echo $customer_group['name']; ?></option>
                        <?php } else { ?>
                        <option value="<?php echo $customer_group['customer_group_id']; ?>"><?php echo $customer_group['name']; ?></option>
                        <?php } ?>
                        <?php } ?>
                    </select></td>
                <td class="text-right"><input type="text" name="product_special[<?php echo $special_row; ?>][priority]" value="<?php echo $product_special['priority']; ?>" placeholder="<?php echo $entry_priority; ?>" class="form-control" /></td>
                <td class="text-right"><input type="text" name="product_special[<?php echo $special_row; ?>][price]" value="<?php echo $product_special['price']; ?>" placeholder="<?php echo $entry_price; ?>" class="form-control" /></td>
                        <td class="text-right"><input type="text" name="product_special[<?php echo $special_row; ?>][pricevatinc]" value="<?php echo $product_special['pricevatinc']; ?>" placeholder="<?php echo $entry_pricevatinc2; ?>" class="form-control" /></td>
                <td class="text-left" style="width: 20%;"><div class="input-group date">
                    <input type="text" name="product_special[<?php echo $special_row; ?>][date_start]" value="<?php echo $product_special['date_start']; ?>" placeholder="<?php echo $entry_date_start; ?>" data-date-format="YYYY-MM-DD" class="form-control" />
                    <span class="input-group-btn">
                    <button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
                    </span></div></td>
                <td class="text-left" style="width: 20%;"><div class="input-group date">
                    <input type="text" name="product_special[<?php echo $special_row; ?>][date_end]" value="<?php echo $product_special['date_end']; ?>" placeholder="<?php echo $entry_date_end; ?>" data-date-format="YYYY-MM-DD" class="form-control" />
                    <span class="input-group-btn">
                    <button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
                    </span></div></td>
                <td class="text-left"><button type="button" onclick="$(this).tooltip('destroy');$('#special-row<?php echo $special_row; ?>').remove();" data-toggle="tooltip" title="<?php echo $button_remove; ?>" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>
            </tr>
            <?php $special_row++; ?>
            <?php } ?>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5"></td>
                <td class="text-left"><button type="button" onclick="addSpecial();" data-toggle="tooltip" title="<?php echo $button_special_add; ?>" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>
            </tr>
        </tfoot>
    </table>
</div>
<script type="text/javascript"><!--
var special_row = <?php echo $special_row; ?>;
function addSpecial() {
    html  = '<tr id="special-row' + special_row + '">';
    html += '  <td class="text-left"><select name="product_special[' + special_row + '][customer_group_id]" class="form-control">';
    <?php foreach ($customer_groups as $customer_group) { ?>
    html += '      <option value="<?php echo $customer_group['customer_group_id']; ?>"><?php echo addslashes($customer_group['name']); ?></option>';
    <?php } ?>
    html += '  </select></td>';
    html += '  <td class="text-right"><input type="text" name="product_special[' + special_row + '][priority]" value="" placeholder="<?php echo $entry_priority; ?>" class="form-control" /></td>';
    html += '  <td class="text-right"><input type="text" name="product_special[' + special_row + '][price]" value="" placeholder="<?php echo $entry_price; ?>" class="form-control" /></td>';
    html += '  <td class="text-right"><input type="text" name="product_special[' + special_row + '][pricevatinc]" value="" placeholder="<?php echo $entry_pricevatinc2; ?>" class="form-control" /></td>';
    html += '  <td class="text-left" style="width: 20%;"><div class="input-group date"><input type="text" name="product_special[' + special_row + '][date_start]" value="" placeholder="<?php echo $entry_date_start; ?>" data-date-format="YYYY-MM-DD" class="form-control" /><span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span></div></td>';
    html += '  <td class="text-left" style="width: 20%;"><div class="input-group date"><input type="text" name="product_special[' + special_row + '][date_end]" value="" placeholder="<?php echo $entry_date_end; ?>" data-date-format="YYYY-MM-DD" class="form-control" /><span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span></div></td>';
    html += '  <td class="text-left"><button type="button" onclick="$(\'#special-row' + special_row + '\').remove();" data-toggle="tooltip" title="<?php echo $button_remove; ?>" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
    html += '</tr>';
    $('#specials tbody').append(html);
    $('#special-row' + special_row + ' .date').datetimepicker({pickTime: false  });
    $('#special-row' + special_row + ' [data-toggle=\'tooltip\']').tooltip({container: 'body'});
    special_row++;
}
$('#specials tbody .date').datetimepicker({pickTime: false});
//--></script>

不幸的是，Poletaew 提供的解决方案（参见答案）在我的网站上无法正常工作。我想可能与我网站的 header 中定义的其他 jquery 或 javascript 文件有冲突。或者当表单显示为弹出窗口时 jquery 没有被激活？我已经将 link 和 jquery 脚本放在我的 header 中，或者只是放在脚本上方的 html 模板页面中，但没有任何帮助。

有没有我可以尝试的解决方法或替代方案？这让我忙了两个晚上:-(。

这是我根据 Poletaew 的建议编写的代码：

    case 'specials': ?>
<div class="table-responsive">
    <table class="table table-striped table-bordered table-hover" id="specials">
        <thead>
            <tr>
                <td class="text-left"><?php echo $entry_customer_group; ?></td>
                <td class="text-right"><?php echo $entry_priority; ?></td>
                <td class="text-right"><?php echo $entry_price; ?></td>
                <td class="text-right"><?php echo $entry_pricevatinc2; ?></td>
                <td class="text-left"><?php echo $entry_date_start; ?></td>
                <td class="text-left"><?php echo $entry_date_end; ?></td>
                <td width="1"></td>
            </tr>
        </thead>
        <tbody>
            <?php $special_row = 0; ?>
            <?php foreach ($product_specials as $product_special) { ?>
            <tr id="special-row<?php echo $special_row; ?>">
                <td class="text-left"><select name="product_special[<?php echo $special_row; ?>][customer_group_id]" class="form-control">
                        <?php foreach ($customer_groups as $customer_group) { ?>
                        <?php if ($customer_group['customer_group_id'] == $product_special['customer_group_id']) { ?>
                        <option value="<?php echo $customer_group['customer_group_id']; ?>" selected="selected"><?php echo $customer_group['name']; ?></option>
                        <?php } else { ?>
                        <option value="<?php echo $customer_group['customer_group_id']; ?>"><?php echo $customer_group['name']; ?></option>
                        <?php } ?>
                        <?php } ?>
                    </select></td>
                <td class="text-right"><input type="text" name="product_special[<?php echo $special_row; ?>][priority]" value="<?php echo $product_special['priority']; ?>" placeholder="<?php echo $entry_priority; ?>" class="form-control" /></td>
                <td class="text-right"><input type="text" name="product_special[<?php echo $special_row; ?>][price]" value="<?php echo $product_special['price']; ?>" placeholder="<?php echo $entry_price; ?>" class="pricevatexc" /></td>
                <td class="text-right"><input type="text" name="product_special[<?php echo $special_row; ?>][pricevatinc]" value="<?php echo $product_special['pricevatinc']; ?>" placeholder="<?php echo $entry_pricevatinc2; ?>" class="pricevatinc" /></td>
                <td class="text-left" style="width: 20%;"><div class="input-group date">
                    <input type="text" name="product_special[<?php echo $special_row; ?>][date_start]" value="<?php echo $product_special['date_start']; ?>" placeholder="<?php echo $entry_date_start; ?>" data-date-format="YYYY-MM-DD" class="form-control" />
                    <span class="input-group-btn">
                    <button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
                    </span></div></td>
                <td class="text-left" style="width: 20%;"><div class="input-group date">
                    <input type="text" name="product_special[<?php echo $special_row; ?>][date_end]" value="<?php echo $product_special['date_end']; ?>" placeholder="<?php echo $entry_date_end; ?>" data-date-format="YYYY-MM-DD" class="form-control" />
                    <span class="input-group-btn">
                    <button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
                    </span></div></td>
                <td class="text-left"><button type="button" onclick="$(this).tooltip('destroy');$('#special-row<?php echo $special_row; ?>').remove();" data-toggle="tooltip" title="<?php echo $button_remove; ?>" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>
            </tr>
            <?php $special_row++; ?>
            <?php } ?>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="6"></td>
                <td class="text-left"><button type="button" onclick="addSpecial();" data-toggle="tooltip" title="<?php echo $button_special_add; ?>" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>
            </tr>
        </tfoot>
    </table>
</div>
<script type="text/javascript"><!--
var special_row = <?php echo $special_row; ?>;

function addSpecial() {
    html  = '<tr id="special-row' + special_row + '">';
    html += '  <td class="text-left"><select name="product_special[' + special_row + '][customer_group_id]" class="form-control">';
    <?php foreach ($customer_groups as $customer_group) { ?>
    html += '      <option value="<?php echo $customer_group['customer_group_id']; ?>"><?php echo addslashes($customer_group['name']); ?></option>';
    <?php } ?>
    html += '  </select></td>';
    html += '  <td class="text-right"><input type="text" name="product_special[' + special_row + '][priority]" value="" placeholder="<?php echo $entry_priority; ?>" class="form-control" /></td>';
    html += '  <td class="text-right"><input type="text" name="product_special[' + special_row + '][price]" value="" placeholder="<?php echo $entry_price; ?>" class="form-control pricevatexc" /></td>';
    //Loulie
    html += '  <td class="text-right"><input type="text" name="product_special[' + special_row + '][pricevatinc]" value="" placeholder="<?php echo $entry_pricevatinc2; ?>" class="form-control pricevatinc" /></td>';
    //Einde Loulie
    html += '  <td class="text-left" style="width: 20%;"><div class="input-group date"><input type="text" name="product_special[' + special_row + '][date_start]" value="" placeholder="<?php echo $entry_date_start; ?>" data-date-format="YYYY-MM-DD" class="form-control" /><span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span></div></td>';
    html += '  <td class="text-left" style="width: 20%;"><div class="input-group date"><input type="text" name="product_special[' + special_row + '][date_end]" value="" placeholder="<?php echo $entry_date_end; ?>" data-date-format="YYYY-MM-DD" class="form-control" /><span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span></div></td>';
    html += '  <td class="text-left"><button type="button" onclick="$(\'#special-row' + special_row + '\').remove();" data-toggle="tooltip" title="<?php echo $button_remove; ?>" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
    html += '</tr>';

    $('#specials tbody').append(html);

    $('#special-row' + special_row + ' .date').datetimepicker({pickTime: false  });

    $('#special-row' + special_row + ' [data-toggle=\'tooltip\']').tooltip({container: 'body'});

    special_row++;
}
$('#specials tbody .date').datetimepicker({pickTime: false});
//--></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript"><!--
var rate = 1.21;
$(document).on('keyup', '.pricevatexc', function(){
    var val = $(this).val();
    $(this).parent().find('.pricevatinc').val(val * rate)
})
$(document).on('keyup', '.pricevatinc', function(){
    var val = $(this).val();
    $(this).parent().find('.pricevatexc').val(val / rate)
})
//--></script>

Answer 1

有解决办法：

var rate = 1.21;

$(document).on('keyup', '.prijs', function(){
 var val = $(this).val();
    
 $(this).parent().find('.pricevatinc').val(val * rate)
})

$(document).on('keyup', '.pricevatinc', function(){
 var val = $(this).val();
    
 $(this).parent().find('.prijs').val(val / rate)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
    <p>
        <input class="prijs" value="100"> <input class="pricevatinc" value="121">
    </p>
    <p>
        <input class="prijs" value="82"> <input class="pricevatinc" value="100">
    </p>
</body>

https://jsfiddle.net/4h37q7p9/

大家可以自己改编，但是大体逻辑要清楚。

自动更改 2 个相关输入字段？

Automatic change of 2 related input fields?

javascript

php

mysql

jquery

opencart