将值从文本框设置到另一个文本框答案

【问题标题】：Set value from textbox to another textbox将值从文本框设置到另一个文本框
【发布时间】：2016-11-07 08:07:14
【问题描述】：

我有这样的标记：

<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 的输入时会出现问题。更多详情请看下图。

【问题讨论】：

请将您当前的代码添加到问题中
页面上不能有多个具有相同 id 的元素，就是不能。
@Imaginaroom：我为新输入生成了 id。另一个输入有 id txthrgsatuan2, txthrgsatuan3, txthrgsatuan..N
@RoryMcCrossan：这是我使用的当前代码 $('input[id^="txthrgsatuan"]').on('change', function() { $('input[id^= "txthrgsatuan"]').each(function() { $(this).parent().next().children().val($(this).val()*$(this).parent()。 prev().children().val()); }); });
在添加新行时使用类和索引而不是 ids，以了解正在更改的输入的行，然后在同一行中更改结果

标签： jquery multiplication

【解决方案1】：

首先将重复的 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>

【讨论】：

代码只能输入第一行，但在另一行，代码不起作用。
我希望您已将 id 更改为那里的类？
是的，我已经为每个输入添加了类。
@gierg 检查更新的答案。稍微改变了处理程序。 $(document).on("input"...

【解决方案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

【讨论】：

代码只能输入第一行，但在另一行，代码不起作用。
对不起，先生，此代码对我不起作用。非常感谢您的回复。 :)

【解决方案3】：

查看此演示，但更改您的 ID，在这种情况下，ID 分配有数字 ie。 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>

【讨论】：

【解决方案4】：

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

【讨论】：