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

Question

I have multiple input that when you select the option, the stock and the price would come out on other input to be used for another function. i've tried to add unique id's for the inputs added but i just cant seem to figure out how to apply the function to the added inputs.

here is the 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>

here is the 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);
    })
    
});

any help and explanation would be much appreciated, thank you

Answer 1

As your first select-box ie : produk_nama is same for all divs you can use clone() method to get clone of that select instead of writing laravel code inside jquery code.

Then , you can use $(document).on("change", "select[name*=produk_nama]".. to capture all change event on select-box . Inside this you can use .closest() and .find() method to get required values from input you needed and add the value to required inputs.Same you can do for jumlah input .

Demo Code :

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