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

时间:2016-08-10 08:02:29

标签: javascript php jquery mysql opencart

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

enter image description here

直到现在,我只能在列#14; prijs"中引入无税价格。现在我添加了一个额外的列" Pricevatinc"。我的目标是,我还能够在列#34; Pricevatinc"中引入税收等价格。 " prijs"之间的比例(不含税)和" pricevatinc" (含税)只是1.21的一个因素。

因此,如果我在列#34; Pricevatinc"中引入100,而不是列#34;价格"应立即改为82.6446。同样,当我在专栏中引入100" prijs"比专栏" pricevatinc"应立即改为121。 输入所有数据后,我将点击" Bewaren"按钮将所有数据保存到数据库。

我的模板中的现有代码段落在下面,但我不熟练,不能用javascript或其他语言进行必要的修改。如果您能查看我的代码并提出必要的更改或帮助我朝正确的方向发展,我将非常高兴....

谢谢, SabKo

脚本代码:

    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模板页面中,但没有任何帮助。

我可以尝试一些变通方法或替代方案吗?这让我在2个晚上忙碌: - (。

这个代码我基于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>

1 个答案:

答案 0 :(得分:0)

有解决方案:

&#13;
&#13;
.blog {

        h2 {
            a {
                font-size:inherit;
                font-weight:inherit;
                color:inherit;
            }


        @media screen and (max-width: 768px){

        .h1, h1 {
            font-size: 16px;
        }
        .h2, h2 {
        font-size: 12px;
        }
}
&#13;
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)
})
&#13;
&#13;
&#13;

https://jsfiddle.net/4h37q7p9/

你可以自己调整它,但一般的逻辑应该是明确的。