Автоматическое изменение 2 связанных полей ввода?

Я хочу изменить существующую форму на своем веб-сайте. Соответствующая форма позволяет мне вводить скидки на некоторые из моих статей в течение ограниченного периода времени на моей панели администратора (см. Изображение). Данные таблицы заполняются через базу данных mysql. Я использую программное обеспечение opencomm для электронной коммерции Opencart.Автоматическое изменение 2 связанных полей ввода?

Недо сейчас, я мог бы ввести только цены без налога в графе «Prijs». Теперь я добавил дополнительный столбец «Pricevatinc». Цель состоит в том, чтобы я мог также ввести цены, включая налоги, в колонку «Pricevatinc». Соотношение между «prijs» (без налога) и «pricevatinc» (с налогом) является просто фактором 1,21.

Так что, если я введу 100 в столбец «Pricevatinc», то столбец «цена» должен немедленно измениться на 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>

источник

2016-08-10 SabKo

Вы можете сделать jsfiddle и показать проблему –

Здравствуйте, Yo Yo, я попытался настроить jsfiddle, но результат очень плохой (не использовал его раньше, и мой сайт еще не подключен к сети, поэтому я не могу настроить внешние ресурсы). Поэтому мне кажется сложным в данный момент. В любом случае, я попытаюсь выяснить, как это работает, потому что это может быть интересно для будущих проблем. Rgeards, SaKko – SabKo

Существует решение:

var rate = 1.21; 
 

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

 
$(document).on('keyup', '.pricevatinc', function(){ 
 
\t var val = $(this).val(); 
 
    
 
\t $(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/

Вы можете адаптировать его для себя, но общая логика должна быть ясной.

источник

2016-08-10 08:54:25 poletaew

Привет, Poletaew, спасибо за фрагмент кода. Кажется, это именно то, что я хочу. Я с нетерпением жду попыток реализовать его на своем веб-сайте позже сегодня. Я дам вам знать, если это сработает. Большое спасибо за Вашу помощь. С уважением. SabKo – SabKo

Привет, Полет, я, наконец, получил его работу.Моя ошибка заключалась в том, что 2 соответствующих ввода были помещены в двух разных родителей (тд-тег), в то время как они должны быть в одном и том же «родительском», как это предлагает ваш код. Спасибо за ваш вклад! SabKo – SabKo

Привет, я прояснись, чтобы помочь вам. Также вы можете получить «tr» ('$ (this) .parents ('tr')' или '$ (this) .parent(). Parent()'). – poletaew

Автоматическое изменение 2 связанных полей ввода?

ответ

Смежные вопросы