javascript - 多个动态输入 onchange 和 onblur 函数 javascript

Question

我有多个输入，当您选择该选项时，股票和价格将出现在其他输入中以用于另一个功能。我试图为添加的输入添加唯一的 id，但我似乎无法弄清楚如何将函数应用于添加的输入。

这是HTML：

<div id="container1">
 <div class="form-group row">
    <div class="col-lg-3">
        <select class="form-control border-teal" id="produk_nama1" name="produk_nama[]">
            <option value="">Pilih Produk</option>
            @foreach ($stoks as $stok)
            <option data-stok="{{$stok->stok}}" data-price="{{$stok->harga}}" value="{{$stok->produk->produk}}">{{$stok->produk->produk}}</option>
            @endforeach
        </select>
        <div class="d-block form-text">
            <span id="stok1" class="badge bg-orange"></span>
        </div>
    </div>

        <div class="col-lg-3">
            <input type="text" id="harga1" name="harga[]" class="form-control border-teal border-1" placeholder="Harga Produk" readonly>
        </div>
        <div class="col-lg-3">
            <input type="number" id="jumlah1" name="jumlah[]" min="1" class="form-control border-teal border-1" placeholder="Masukkan Jumlah">
        </div>
        <div class="col-lg-3">
            <input type="text" id="subtotal1" name="subtotal" class="form-control border-teal border-1" placeholder="Subtotal" readonly>
        </div>
        
    </div>
    
</div>

这是javascript：

$(document).ready(function() {
    var add_button = $("#add_button");
    var inputs = document.getElementsByTagName('input');
    var select = document.getElementById("produk_nama");
    var i = 1;
    $(add_button).click(function(e) {
        e.preventDefault();
        i++;
        $("#container1")

        var html = '<div class="form-group row">';

        // select buah
        html += '<div class="col-lg-3">';
        html += '<select class="form-control border-teal" id="produk_nama'+i+'" name="produk_nama[]">';
        html += '<option value="">Pilih Produk</option>';
        html += '@foreach ($stoks as $stok)';
        html += '<option data-stok="{{$stok->stok}}" data-price="{{$stok->harga}}" value="{{$stok->produk->produk}}">{{$stok->produk->produk}}</option>';
        html += '@endforeach';
        html += '</select>';
        html += '<div class="d-block form-text">';
        html += '<span id="stok'+i+'" class="badge bg-orange"></span>';
        html += '</div></div>';

        html += '<div class="col-lg-3">';
        html += '<input type="text" id="harga'+i+'" name="harga[]" class="form-control border-teal border-1" placeholder="Harga Produk" readonly>';
        html += '</div>';

        html += '<div class="col-lg-3">';
        html += '<input type="number" id="jumlah'+i+'" name="jumlah[]" min="1" class="form-control border-teal border-1" placeholder="Masukkan Jumlah">';
        html += '</div>';

        html += '<div class="col-lg-3">';
        html += '<input type="text" id="subtotal'+i+'" name="subtotal" class="form-control border-teal border-1" placeholder="Subtotal" readonly>';
        html += '</div>';

        html += '</div>';


        $(this).before(html);

        // clone entire div
        // $("#container1")
        // .append(
        // $("#container1")
        // .children(inputs)
        // .first()
        // .clone()
        // )
        
    });

    // main input function
    $('#produk_nama'+i).on('change', function(){
        alert(i);
        var hargaproduk = $('#produk_nama'+i+' option:selected').data('price');
        var stok = $('#produk_nama'+i+' option:selected').data('stok');
        $('#stok'+i).text('Stok '+stok);
        $('#harga'+i).val(hargaproduk);
    });

    document.getElementById('jumlah'+i).addEventListener("blur", function(){
        var jumlah = $('#jumlah'+i).val();
        var harga = $('#harga'+i).val();
        var subtotal = jumlah * harga;
        $('#subtotal'+i).val(subtotal);
    })
    
});

任何帮助和解释将不胜感激，谢谢

标签： javascriptjquerylaravel

Answer 1

作为您的第一个选择框，即：produk_nama对于所有 div 都相同，您可以使用clone()方法来获取该选择的克隆，而不是在 jquery 代码中编写 laravel 代码。

然后，您可以使用$(document).on("change", "select[name*=produk_nama]"..捕获 select-box 上的所有更改事件。在此内部，您可以使用.closest()and.find()方法从所需的输入中获取所需的值，并将该值添加到所需的输入中。您可以对jumlahinput 执行相同的操作。

演示代码：

$(document).ready(function() {
  var add_button = $("#add_button");
  var i = 1;
  $(add_button).click(function(e) {
    e.preventDefault();
    i++;
    $("#container1")
    //get first div > selct clone it
    var slects = $('.outer:first').find("select").clone();
    var html = '<div class="form-group row outer">';
    html += '<div class="col-lg-3">';
    html += '<select class="form-control border-teal" id="produk_nama' + i + '" name="produk_nama[]">';
    html += $(slects).html(); //add that 
    html += '</select>';
    html += '<div class="d-block form-text">';
    html += '<span id="stok' + i + '" class="badge bg-orange"></span>';
    html += '</div></div>';

    html += '<div class="col-lg-3">';
    html += '<input type="text" id="harga' + i + '" name="harga[]" class="form-control border-teal border-1" placeholder="Harga Produk" readonly>';
    html += '</div>';

    html += '<div class="col-lg-3">';
    html += '<input type="number" id="jumlah' + i + '" name="jumlah[]" min="1" class="form-control border-teal border-1" placeholder="Masukkan Jumlah">';
    html += '</div>';

    html += '<div class="col-lg-3">';
    html += '<input type="text" id="subtotal' + i + '" name="subtotal" class="form-control border-teal border-1" placeholder="Subtotal" readonly>';
    html += '</div>';

    html += '</div>';


    $(this).before(html);

  });

  //on change of selct
  $(document).on("change", "select[name*=produk_nama]", function() {
    //get attrs values
    var hargaproduk = $(this).find("option:selected").attr('data-price');
    var stok = $(this).find("option:selected").attr('data-stok');
    //add the values to required elemnt
    $(this).closest(".outer").find(".d-block span").text('Stok ' + stok)
    $(this).closest(".outer").find("input[name*=harga]").val(hargaproduk);
  });

  $(document).on("blur", "input[name*=jumlah]", function() {
    var jumlah = $(this).val(); //get value
    var harga = $(this).closest(".outer").find("input[name*=harga]").val();
    var subtotal = jumlah * harga;
    //add value to subtotal 
$(this).closest(".outer").find("input[name=subtotal]").val(subtotal);
  })

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container1">
<!--just added outer class-->
  <div class="form-group row outer">
    <div class="col-lg-3">
      <select class="form-control border-teal" id="produk_nama1" name="produk_nama[]">
        <option value="">Pilih Produk</option>

        <option data-stok="something" data-price="12" value="1">1</option>
        <option data-stok="something" data-price="13" value="2">2</option>
        <option data-stok="something" data-price="14" value="3">3</option>

      </select>
      <div class="d-block form-text">
        <span id="stok1" class="badge bg-orange"></span>
      </div>
    </div>

    <div class="col-lg-3">
      <input type="text" id="harga1" name="harga[]" class="form-control border-teal border-1" placeholder="Harga Produk" readonly>
    </div>
    <div class="col-lg-3">
      <input type="number" id="jumlah1" name="jumlah[]" min="1" class="form-control border-teal border-1" placeholder="Masukkan Jumlah">
    </div>
    <div class="col-lg-3">
      <input type="text" id="subtotal1" name="subtotal" class="form-control border-teal border-1" placeholder="Subtotal" readonly>
    </div>

  </div>

</div>

<button id="add_button">Add more</button>