Установленное значение из текстового поля в другое текстовое поле

У меня есть код вроде этого:Установленное значение из текстового поля в другое текстовое поле

<div class="margin-bottom-sm col-sm-2"> 
    <input type="text" class="form-control" name="txtketdetail[]" id="txtketdetail" placeholder="Nama detail akun" required /> 
</div> 
<div class="margin-bottom-sm col-sm-2"> 
    <input type="text" class="form-control input-number" name="txtvolume[]" id="txtvolume" placeholder="Volume/Jumlah" required /> 
</div> 
<div class="margin-bottom-sm col-sm-2"> 
    <input type="text" class="form-control input-number" name="txthrgsatuan[]" id="txthrgsatuan" placeholder="Harga satuan" required /> 
</div> 
<div class="margin-bottom-sm col-sm-2"> 
    <input type="text" class="form-control input-number" name="txtjmlbiaya[]" id="txtjmlbiaya" placeholder="Jumlah biaya" required /> 
</div>

$('input[id^="txthrgsatuan"]').on('change', function() { 
    $('input[id^="txthrgsatuan"]').each(function() { 
     $(this).parent().next().children().val($(this).val()*$(this).parent().prev().children().val()); 
    }); 
});

Я хочу, чтобы умножить txthrgsatuan с txtvolume и есть конечный результат появится в txtjmlbiaya событий изменения триггера txthrgsatuan. Однако есть проблемы, когда я добавляю еще один вход с тем же name a id. Для получения более подробной информации см. Рисунок ниже.

источник

2016-11-07 gierg

Пожалуйста, добавьте ваш текущий код на вопрос –

Вы не можете иметь более одного элемента с одинаковым идентификатором на странице, вы просто не можете. – Imaginaroom

@Imaginaroom: У меня есть идентификатор для новых входов. другой вход имеет id txthrgsatuan2, txthrgsatuan3, txthrgsatuan..N – gierg

Прежде всего изменить дублированные идентификаторы в классы. Затем установите событие input в нужные поля ввода, выберите значения и установите их соответствующим образом.

Это рабочая демонстрация.

$(function() { 
 

 
    $(document).on("input", ".txthrgsatuan", function() { 
 
    var val = $(this).val(); 
 
    var otherVal = $(this).parent().prev().children().val(); 
 
    $(this).parent().next().children().val(val * otherVal); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="margin-bottom-sm col-sm-2"> 
 
    <input type="text" class="form-control txtketdetail" name="txtketdetail[]" placeholder="Nama detail akun" required /> 
 
</div> 
 
<div class="margin-bottom-sm col-sm-2"> 
 
    <input type="text" class="form-control input-number txtvolume" name="txtvolume[]" placeholder="Volume/Jumlah" required /> 
 
</div> 
 
<div class="margin-bottom-sm col-sm-2"> 
 
    <input type="text" class="form-control input-number txthrgsatuan" name="txthrgsatuan[]" placeholder="Harga satuan" required /> 
 
</div> 
 
<div class="margin-bottom-sm col-sm-2"> 
 
    <input type="text" class="form-control input-number txtjmlbiaya" name="txtjmlbiaya[]" placeholder="Jumlah biaya" required /> 
 
</div>

источник

2016-11-07 08:38:03 void

код работает только для ввода первой строки, но в другой строке код не работает. – gierg

Надеюсь, вы изменили идентификаторы на классы там? – void

Отметьте обновленный ответ. – void

$(document).on("input", 'input[id^="txthrgsatuan"]', function() { 
 
    $('[name="txthrgsatuan[]"]').each(function() { 
 
     var intMultiplication = parseInt($(this).val()) * parseInt($(this).parent().prev().children().val()); 
 
     if (!isNaN(intMultiplication)) 
 
     { 
 
      $(this).parent().next().children().val(intMultiplication); 
 
     } 
 
    }); 
 
});

<html> 
 
    <head> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    </head> 
 
    <body> 
 
     <div class="margin-bottom-sm col-sm-2"> 
 
      <input type="text" class="form-control" name="txtketdetail[]" id="txtketdetail" placeholder="Nama detail akun" required /> 
 
     </div> 
 
     <div class="margin-bottom-sm col-sm-2"> 
 
      <input type="number" class="form-control input-number" name="txtvolume[]" id="txtvolume" placeholder="Volume/Jumlah" required /> 
 
     </div> 
 
     <div class="margin-bottom-sm col-sm-2"> 
 
      <input type="number" class="form-control input-number" name="txthrgsatuan[]" id="txthrgsatuan" placeholder="Harga satuan" required /> 
 
     </div> 
 
     <div class="margin-bottom-sm col-sm-2"> 
 
      <input type="number" class="form-control input-number" name="txtjmlbiaya[]" id="txtjmlbiaya" placeholder="Jumlah biaya" required /> 
 
     </div> 
 
    </body> 
 
</html>

Этот код будет работать на динамических входов, а также. Если вы будете использовать этот код, вам не нужно будет создавать динамический атрибут id.

источник

2016-11-07 08:34:38

сценарий не работает. :( – gierg

Вы получаете какие-либо ошибки? –

нет ошибки сэр. – gierg

Вы можете сначала начать с добавления классов к своим входам вместо идентификаторов. После этого вы получите родительский элемент, а затем поиск с помощью "найти(), а затем умножить два значения:

$('.txtvolume, .txthrgsatuan').keyup(function(){ 
    var value_1 = $(this).val(); 
    var value_2 = $(this).parent().parent().find($(this).hasClass('txthrgsatuan') ? '.txtvolume': '.txthrgsatuan').val(); 

    $(this).parent().parent().find('.txtjmlbiaya').val(value_1 * value_2); 

});

HTML:

<div class="row"> 

    <div class="margin-bottom-sm col-sm-2"> 
     <input type="text" class="form-control" name="txtketdetail[]" id="txtketdetail" placeholder="Nama detail akun" required /> 
    </div> 
    <div class="margin-bottom-sm col-sm-2"> 
     <input type="text" class="form-control input-number txtvolume" name="txtvolume[]" placeholder="Volume/Jumlah" required /> 
    </div> 
    <div class="margin-bottom-sm col-sm-2"> 
     <input type="text" class="form-control input-number txthrgsatuan" name="txthrgsatuan[]" placeholder="Harga satuan" required /> 
    </div> 
    <div class="margin-bottom-sm col-sm-2"> 
     <input type="text" class="form-control input-number txtjmlbiaya" name="txtjmlbiaya[]" placeholder="Jumlah biaya" required /> 
    </div> 

</div>

DEMO

источник

2016-11-07 08:35:48 user3284463

код, который работает только для ввода первой строки, но в другой строке, код не работает. – gierg

@gierg Проверить демо. Это работает :) – user3284463

извините, этот код не работает для меня. Большое спасибо за вашу реакцию. :) – gierg

Проверить эту демку, но изменить помысел свой идентификатор в этом случае идентификаторы присваиваются с номером т. block 1 содержит idname2, block 2 содержит idname2 и т. Д. ... это работает и для нескольких блоков.

$('[id^="txtvolume"]').on('change keyup', function(){ 
 
\t var thisVal = isNaN($(this).val())? 0 : parseInt($(this).val()); 
 
    var $next = $(this).parent().next('div'); 
 
    var nextVal = isNaN($next.find('input').val())? 0 : parseInt($next.find('input').val()); 
 
    var $total = $next.next('div'); 
 
\t var prod = isNaN(thisVal * nextVal)?0:thisVal * nextVal; 
 
    $total.find('input').val(prod); 
 
}); 
 

 

 
$('[id^="txthrgsatuan"]').on('change keyup', function(){ 
 
\t var thisVal = isNaN($(this).val())? 0 : parseInt($(this).val()); 
 
    var $prev = $(this).parent().prev('div'); 
 
    var prevVal = isNaN($prev.find('input').val())? 0 : parseInt($prev.find('input').val()); 
 
    var $total = $(this).parent().next('div'); 
 
\t var prod = isNaN(thisVal * prevVal)?0:thisVal * prevVal; 
 
    $total.find('input').val(prod); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="margin-bottom-sm col-sm-2"> 
 
    <input type="text" class="form-control" name="txtketdetail[]" id="txtketdetail1" placeholder="Nama detail akun" required /> 
 
</div> 
 
<div class="margin-bottom-sm col-sm-2"> 
 
    <input type="text" class="form-control input-number" name="txtvolume[]" id="txtvolume1" placeholder="Volume/Jumlah" required /> 
 
</div> 
 
<div class="margin-bottom-sm col-sm-2"> 
 
    <input type="text" class="form-control input-number" name="txthrgsatuan[]" id="txthrgsatuan1" placeholder="Harga satuan" required /> 
 
</div> 
 
<div class="margin-bottom-sm col-sm-2"> 
 
    <input type="text" class="form-control input-number" name="txtjmlbiaya[]" id="txtjmlbiaya1" placeholder="Jumlah biaya" required /> 
 
</div> 
 
<br/><br/> 
 
<div class="margin-bottom-sm col-sm-2"> 
 
    <input type="text" class="form-control" name="txtketdetail[]" id="txtketdetail2" placeholder="Nama detail akun" required /> 
 
</div> 
 
<div class="margin-bottom-sm col-sm-2"> 
 
    <input type="text" class="form-control input-number" name="txtvolume[]" id="txtvolume2" placeholder="Volume/Jumlah" required /> 
 
</div> 
 
<div class="margin-bottom-sm col-sm-2"> 
 
    <input type="text" class="form-control input-number" name="txthrgsatuan[]" id="txthrgsatuan2" placeholder="Harga satuan" required /> 
 
</div> 
 
<div class="margin-bottom-sm col-sm-2"> 
 
    <input type="text" class="form-control input-number" name="txtjmlbiaya[]" id="txtjmlbiaya2" placeholder="Jumlah biaya" required /> 
 
</div> 
 
<br/><br/> 
 

 
<div class="margin-bottom-sm col-sm-2"> 
 
    <input type="text" class="form-control" name="txtketdetail[]" id="txtketdetail3" placeholder="Nama detail akun" required /> 
 
</div> 
 
<div class="margin-bottom-sm col-sm-2"> 
 
    <input type="text" class="form-control input-number" name="txtvolume[]" id="txtvolume3" placeholder="Volume/Jumlah" required /> 
 
</div> 
 
<div class="margin-bottom-sm col-sm-2"> 
 
    <input type="text" class="form-control input-number" name="txthrgsatuan[]" id="txthrgsatuan3" placeholder="Harga satuan" required /> 
 
</div> 
 
<div class="margin-bottom-sm col-sm-2"> 
 
    <input type="text" class="form-control input-number" name="txtjmlbiaya[]" id="txtjmlbiaya3" placeholder="Jumlah biaya" required /> 
 
</div>

источник

2016-11-07 08:44:36 four

Установленное значение из текстового поля в другое текстовое поле

ответ

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