获取并输入值以在动态表单上输入文本?

时间:2018-11-29 03:41:35

标签: javascript laravel-5 vue.js

我有 Basic Idea使用此UI Dynamic form on Laravel在我的表单上实现,因此我想让Kode在Text Kode上有效(onChanged)在每个Text Input上输入名称Product&HNA。

我想用javascript实现,但我不知道。因为输入数字3之后的字段是用javascript创建的。

这是我的HTML和javascript:

    var pitem = 2;
    function add_baris()
    {   
        if(pitem<=10)
        {
            //Tambah inner baris html
            $("#tambahan").append('<tr><td>'+pitem+'.</td><td><input type="text" class="form-control input-sm" name="kode[]"></td><td><input type="text" class="form-control input-sm" name="material[]" readonly></td><td><input type="text" class="form-control input-sm" name="hna[]"></td><td><input type="text" class="form-control input-sm" name="qty[]"></td><td><input type="text" class="form-control input-sm" name="value[]"></td><td><input type="text" class="form-control input-sm" name="persen[]"></td><td><input type="text" class="form-control input-sm" name="biaya[]"></td><td><button class="btn btn-sm btn-danger" title="Hapus"><span class="fa fa-trash"></span></button></td></tr>');
            
            //Tambah baris
            pitem++;      

            //Hapus baris
            $("#tambahan").find("button").on('click',function(){
                    $(this).parent().parent().remove();
                    if(pitem!=2){
                        document.getElementById('jitem').value=pitem-1;
                        pitem=pitem-1;
                    }
            });      
        }
        else{
            alert('Produk tidak boleh lebih dari 10 item');
        }
    }
<div class="panel panel-warning">
        <div class="panel-heading">
            <h3 class="panel-title">Lampiran Total Estimasi</h3>
        </div>
        <div class="panel-body">    
        <form action="" method="get" enctype="multipart/form-data" class="form-horizontal">
            <input type="hidden" name="_token" value="f5H1hrktb5woVS982DE1FGzTCWu8J1SPeQRcfVrQ">
            <div class="container-fluid">
                <div class="row">
                    <div class="form-group">
                        <div class="col-sm-2">
                            <label>Nomor</label>
                            <input type="text" class="form-control input-sm" value="APS20181127151641" disabled="">
                        </div>
                        <div class="col-sm-4">
                            <label>Periode</label>
                            <div class="row">
                                <div class="col-sm-6">
                                    <input type="text" class="form-control input-sm" value="2018-11-09" disabled="">
                                </div>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control input-sm" value="2018-12-01" disabled="">
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <label>Monitoring</label>
                            <input type="text" class="form-control input-sm" value="ujjj jjj jj" disabled="">
                        </div>
                    </div>
                </div>
            </div>
            <div class="table-responsive">      
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th rowspan="2" id="tengah" width="2%">No</th>
                        <th rowspan="2" id="tengah" width="10%">Kode</th>
                        <th rowspan="2" id="tengah">Produk</th>
                        <th rowspan="2" id="tengah" width="10%">HNA</th>
                        <th colspan="2" id="tengah">Total Estimasi</th>                        
                        <th colspan="2" id="tengah">Biaya</th>                      
                        <th rowspan="2" width="1%" id="tengah">
                            <button type="button" class="btn btn-sm btn-success" onclick="add_baris();"><span class="glyphicon glyphicon-plus-sign"></span></button>
                        </th>
                    </tr>
                    <tr>                        
                        <th width="8%">Qty</th>
                        <th width="15%">Values</th>
                        <th width="5%">%</th>
                        <th width="15%">Rupiah</th>
                    </tr>                    
                </thead>
                <tbody id="tambahan">
                    <tr>                    
                        <td>1.</td>
                        <td><input type="text" class="form-control input-sm" id="kode" name="kode[]"></td>
                        <td><input type="text" class="form-control input-sm" id="material" name="material[]" readonly=""></td>
                        <td><input type="text" class="form-control input-sm" id="hna" name="hna[]"></td>
                        <td><input type="text" class="form-control input-sm" id="qty" name="qty[]"></td>
                        <td><input type="text" class="form-control input-sm" id="value" name="value[]"></td>
                        <td><input type="text" class="form-control input-sm" id="persen" name="persen[]"></td>
                        <td><input type="text" class="form-control input-sm" id="biaya" name="biaya[]"></td>
                        <td>
                            <button class="btn btn-sm btn-danger" title="Hapus" disabled=""><span class="fa fa-trash"></span></button>
                        </td>
                    </tr>
                    <tr>                    
                        <td>2.</td>
                        <td><input type="text" class="form-control input-sm" id="kode" name="kode[]"></td>
                        <td><input type="text" class="form-control input-sm" id="material" name="material[]" readonly=""></td>
                        <td><input type="text" class="form-control input-sm" id="hna" name="hna[]"></td>
                        <td><input type="text" class="form-control input-sm" id="qty" name="qty[]"></td>
                        <td><input type="text" class="form-control input-sm" id="value" name="value[]"></td>
                        <td><input type="text" class="form-control input-sm" id="persen" name="persen[]"></td>
                        <td><input type="text" class="form-control input-sm" id="biaya" name="biaya[]"></td>
                        <td>
                            <button class="btn btn-sm btn-danger" title="Hapus" disabled=""><span class="fa fa-trash"></span></button>
                        </td>
                    </tr>                    
                <tr><td>2.</td><td><input type="text" class="form-control input-sm" name="kode[]"></td><td><input type="text" class="form-control input-sm" name="material[]" readonly=""></td><td><input type="text" class="form-control input-sm" name="hna[]"></td><td><input type="text" class="form-control input-sm" name="qty[]"></td><td><input type="text" class="form-control input-sm" name="value[]"></td><td><input type="text" class="form-control input-sm" name="persen[]"></td><td><input type="text" class="form-control input-sm" name="biaya[]"></td><td><button class="btn btn-sm btn-danger" title="Hapus"><span class="fa fa-trash"></span></button></td></tr><tr><td>3.</td><td><input type="text" class="form-control input-sm" name="kode[]"></td><td><input type="text" class="form-control input-sm" name="material[]" readonly=""></td><td><input type="text" class="form-control input-sm" name="hna[]"></td><td><input type="text" class="form-control input-sm" name="qty[]"></td><td><input type="text" class="form-control input-sm" name="value[]"></td><td><input type="text" class="form-control input-sm" name="persen[]"></td><td><input type="text" class="form-control input-sm" name="biaya[]"></td><td><button class="btn btn-sm btn-danger" title="Hapus"><span class="fa fa-trash"></span></button></td></tr></tbody>            
            </table>
            </div>
            <input type="hidden" id="jitem" name="jitem" value="1">
            <input type="submit" class="btn-sm btn btn-success" value="Save">
            <input type="reset" class="btn-sm btn btn-warning" value="Batal">
        </form>
    </div>
    </div>

0 个答案:

没有答案