Pricevatinc

Pricevatinc

关注
发信
关注(28)粉丝(399)

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

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

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

到目前为止，我只能在“ prijs”列中介绍不含税的价格。现在，我添加了另一列“ Pricevatinc”。目的是我也可以在“ Pricevatinc”列中引入含税价格。 “ prijs”（不含税）和“ pricevatinc”（含税）之间的比率仅为1.21。

因此，如果我在“ Pricevatinc”列中引入100，则“价格”列应立即更改为82.6446。同样，当我在“ prijs”列中引入100时，“ pricevatinc”列应立即更改为121。
输入所有数据后，我将单击“注意”按钮以将所有数据保存到数据库。

我的模板中的现有代码已添加到下面，但我不够熟练，无法使用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提供的解决方案（请参见答案）在我的网站上无法正常工作。我想可能与网站标题中定义的其他jquery或javascript文件存在冲突。还是当表单显示为弹出窗口时，jQuery并未激活？我已将指向jquery脚本的链接放置在标题中或脚本上方的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>

最佳答案

有解决方案：



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/

您可以自己调整它，但是一般逻辑应该很清楚。

10-07 21:18
Powered by LMLPHP ©2025 Pricevatinc 0.029726