将文本框的值设置为另一个文本框

Question

我有这样的标记：

<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 和 id 的输入时，就会出现问题。更多详情见下图。

Answer 1

$(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 属性。

Answer 2

您可以首先将类添加到您的输入而不是 ID。然后你得到父元素然后使用'find()'搜索然后将两个值相乘：

$('.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

Answer 3

首先将重复的 ID 更改为类。然后在所需的输入字段上设置一个 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>

Answer 4

查看此演示，但更改您的 ID，在这种情况下，id 分配有数字，即。 block 1 包含 idname2，block 2 包含 idname2，依此类推...这也适用于多个块。

$('[id^="txtvolume"]').on('change keyup', function(){
 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');
 var prod = isNaN(thisVal * nextVal)?0:thisVal * nextVal;
    $total.find('input').val(prod);
});


$('[id^="txthrgsatuan"]').on('change keyup', function(){
 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');
 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>

将文本框的值设置为另一个文本框

Set value from textbox to another textbox

jquery

multiplication