如何使用jQuery动态地将自动填充转换成添加/删除字段？

Question

如何使用jQuery动态地将自动填充转换成添加/删除字段？

4

我正在使用Laravel编写程序。我使用jquery添加/删除字段。第一个字段从数据库中获取数据以列出人名。

     <div class="container table-responsive col-lg-10">
          <form method="post" id="dynamic_form">
            <span id="result"></span>
             <table class="table table-hover table-responsive table-bordered" id="user_table">
           <thead>
            <tr>
                <td class="text-center col-lg-3">Nama</th>
                <td class="text-center col-lg-2">No Personal</th>
                <td class="text-center col-lg-1">Jabatan</th>
                <td class="text-center col-lg-1">Telefon</th>
                <td class="text-center col-lg-1">Ext</th>
                <td class="text-center col-lg-1">Action</th>
            </tr>
           </thead>
           <tbody>

           </tbody>
           <tfoot>
            <tr>
              <td colspan="2" align="right">&nbsp;</td>
              <td></td>
            </tr>
           </tfoot>
       </table>
    </div>  
    <script>
      $(document).ready(function(){

      var count = 1;

      dynamic_field(count);

      function dynamic_field(number)
      {
      html = '<tr>';
     html += '<td><select id="nama" name="nama[]" class="form-control"><option value="">--Pilih--</option><?php foreach($staff as $key => $value):echo '<option value="'.$key.'">'.addslashes($value).'</option>'; endforeach; ?></select></td>';
    html += '<td><input type="text" name="no_personal[]" class="form-control" /></td>';
    html += '<td><input type="text" name="jabatan[]" class="form-control" /></td>';
    html += '<td><input type="text" name="telefon[]" class="form-control" /></td>';
    html += '<td><input type="text" name="ext[]" class="form-control" /></td>';
    if(number > 1)
    {
        html += '<td class="text-center"><button type="button" name="remove" id="" class="btn btn-danger remove">Batal</button></td></tr>';
        $('tbody').append(html);
    }
    else
    {   
        html += '<td class="text-center"><button type="button" name="add" id="add" class="btn btn-success">Tambah Pegawai</button></td></tr>';
        $('tbody').html(html);
    }
}

   $(document).on('change', '.nama', function(){
    var staffID = jQuery(this).val();
    if(staffID)
    {
      jQuery.ajax({
          url : 'add_demo/get_staff/'+staffID,
          type : "GET",
          dataType : "json",
          success:function(data)
          {
            console.log(data);
                $('#no_personal').val(data.Nobadan);
                $('#jabatan').val(data.SectionID);
                $('#telefon').val(data.notelttp);
                $('#ext').val(data.ext);   
          }
      });
    }
    else
    {
      $('#no_personal').empty();
      $('#jabatan').empty();
      $('#telefon').empty();
      $('#ext').empty();
    }
  });


 $(document).on('click', '#add', function(){
  count++;
  dynamic_field(count);
  });

 $(document).on('click', '.remove', function(){
  count--;
  $(this).closest("tr").remove();
 });

});
</script>

我已经编辑了JS代码：

    function dynamic_field(number)
 {
  html = '<tr>';
     html += '<td><select id="nama_'+ count +'" name="nama[]" class="form-control"><option value="">Pilih</option><?php foreach($pegawai as $key => $value):echo '<option value="'.$key.'">'.addslashes($value).'</option>'; endforeach; ?></select></td>';
    html += '<td><input id="nb_'+ count +'" type="text" name="no_badan[]" class="form-control"  value="nb_'+ count +'" /></td>';
    html += '<td><input id="sek_'+ count +'" type="text" name="seksyen[]" class="form-control" /></td>';
    html += '<td><input id="tel_'+ count +'" type="text" name="telefon[]" class="form-control" /></td>';
    html += '<td><input id="ext_'+ count +'" type="text" name="ext[]" class="form-control" /></td>';
    if(number > 1)
    {
        html += '<td class="text-center"><button type="button" name="remove" id="" class="btn btn-danger remove">Batal</button></td></tr>';
        $('tbody').append(html);
    }
    else
    {   
        html += '<td class="text-center"><button type="button" name="add" id="add" class="btn btn-success">Tambah</button></td></tr>';
        $('tbody').html(html);
    }
 }

 $(document).on('change', '.nama_'+ count +'', function(){
    var staffID = jQuery(this).val();
    if(staffID)
    {
      jQuery.ajax({
          url : 'add_demo/get_sta/'+staffID,
          type : "GET",
          dataType : "json",
          success:function(data)
          {
            console.log(data);
                $('#nb_'+ count +'').val(data.Nobadan);
                $('#seksyen').val(data.SectionID);
                $('#telefon').val(data.notelttp);
                $('#ext').val(data.ext);   
          }
      });
    }
    else
    {
      $('#nb_'+ count +'').empty();
      $('#seksyen').empty();
      $('#telefon').empty();
      $('#ext').empty();
    }
  });


  $(document).on('click', '#add', function(){
   count++;
   dynamic_field(count);
 });

  $(document).on('click', '.remove', function(){
  count--;
  $(this).closest("tr").remove();
  });

  });
 </script>

当选择第一个字段（员工姓名）时，关于无个人、职位、电话和分机号码的信息将自动填写到该字段中。使用此ajax网址获取信息：

 url : 'add_demo/get_staff/'+staffID,

那个的控制器是：

$data = staffs::where('staffID', $staffID)
            ->select('staffs.No_pers', 'staffs.JabID', 'staffs.notel', 'staffs.ext')
            ->first();

return json_encode($data);

我可以在选择框中列出员工姓名。但是当我选择员工姓名时，信息并没有填入相应的字段。

该字段已经被赋予了一个类似这样的id：

 html += '<td><input id="nb_'+ count++ +'" type="text" name="no_badan[]" class="form-control" /></td>';

如何改进代码？我试图在添加的字段中放置ID，但这会导致添加的字段具有相同的ID名称错误。

- joun

同一字段在控制台中显示为14个字段。 - joun

1

你还需要在你的change方法中添加计数器，就像你传递了它所选字段的值一样。就像这样$('#nb_'+count).val(data.Nobadan);等等... - Akhtar Munir

1

问题在于，您正在使字段动态化，但是您对所有下拉菜单使用相同的下拉菜单，您也需要使其动态化，以便在调用ajax时，它将对每个附加行都是动态的。通过这个过程，您还将能够为动态字段设置值。就像我在上面的评论中所做的那样。 - Akhtar Munir

并且在上面，您已经为 nama 使用了 id="nama"，但是在更改方法中，您正在使用 class 或 . 访问它。 - Akhtar Munir

1

让我们在聊天中继续这个讨论。 - Akhtar Munir

显示剩余3条评论

2个回答

0

建议：

请检查id，它不是唯一的。

使用适当的计数来增加ID。

- Zeeshan Eqbal

谢谢您的建议。ID是唯一的，但控制台显示了一些重复（我不知道为什么）。我已经搜索了几周，现在使用类而不是ID。 - joun

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dilpesh · Accepted Answer

有一种最简单的方法可以创建像这样的组件。请看下面给出的代码片段。

$(document).on('click','.add',function(){
        var clonned = $(this).parents('.clonable:last-child').clone();
        parentId = clonned.attr('parentId');
        clonned.attr('parentId',parseInt(parentId)+1);
        clonned.find('input[type="text"]').each(function(){
            return $(this).val('');
        })
        $('.clonable').parents('tbody').append(clonned);
    });
    $(document).on('click','.remove',function(){
        $(this).parents('.clonable').remove();
    });

   $(document).on('change', '.nama', function(){
        var staffID = $(this).val();
        var parentId = $(this).parents('.clonable').attr('parentId');
        if(staffID){
            jQuery.ajax({
                url : 'add_demo/get_staff/'+staffID,
                type : "GET",
                dataType : "json",
                success:function(data){
                    console.log(data);
                    $('tr[parentId="'+parentId+'"] input[name="no_personal[]"]').val(data.Nobadan);
                    $('tr[parentId="'+parentId+'"] input[name="jabatan[]"]').val(data.SectionID);
                    $('tr[parentId="'+parentId+'"] input[name="telefon[]"]').val(data.notelttp);
                    $('tr[parentId="'+parentId+'"] input[name="ext[]"]').val(data.ext);
                }
            });
        }else{
            $('tr[parentId="'+parentId+'"] input[name="no_personal[]"]').val('');
            $('tr[parentId="'+parentId+'"] input[name="jabatan[]"]').val('');
            $('tr[parentId="'+parentId+'"] input[name="telefon[]"]').val('');
            $('tr[parentId="'+parentId+'"] input[name="ext[]"]').val('');
        }
    });

.clonable .add{
  display: none;
}
.clonable:last-child .add{
  display: inline-block !important;  
}
.clonable:only-child .remove{
  display: none !important;  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container table-responsive col-lg-10">
        <form method="post" id="dynamic_form">
            <span id="result"></span>
            <table class="table table-hover table-responsive table-bordered" id="user_table">
                <thead>
                    <tr>
                        <th class="text-center col-lg-3">Nama</th>
                        <th class="text-center col-lg-2">No Personal</th>
                        <th class="text-center col-lg-1">Jabatan</th>
                        <th class="text-center col-lg-1">Telefon</th>
                        <th class="text-center col-lg-1">Ext</th>
                        <th class="text-center col-lg-1">Action</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="clonable" parentId="1">
                        <td>
                            <select id="nama" name="nama[]" class="form-control nama">
                                <option value="">--Pilih--</option>
                                <?php foreach($staff as $key => $value){?>
                                    <option value="<?=$key?>"><?=addslashes($value)?></option>
                                <?php }?>
                            </select>
                        </td>
                        <td><input type="text" id="no_personal" name="no_personal[]" class="form-control" /></td>
                        <td><input type="text" id="jabatan" name="jabatan[]" class="form-control" /></td>
                        <td><input type="text" id="telefon" name="telefon[]" class="form-control" /></td>
                        <td><input type="text" id="ext" name="ext[]" class="form-control" /></td>
                        <td class="text-center">
                            <button type="button" name="remove" id="" class="btn btn-danger remove">Batal</button>
                            <button type="button" name="add" id="add" class="btn btn-success add">Tambah Pegawai</button>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="6" align="right">&nbsp;</td>
                    </tr>
                </tfoot>
            </table>
        </form>
    </div>