mercredi 5 février 2020

How to make on change selection using array of textfield name?

I had add/remove fields dynamically using jquery in laravel 5. In the dynamic field, there is a selection field which will autofill the other dynamic textfields. However, the dynamic selection is named as an array 'pegawai[]'. If using id, it will be easier. But I don't know how to make on change selection using array textfield name.

This is the code for the fields:

       <div class="table-responsive">  
            <table class="table table-bordered" id="dynamic_field">  
                <tr>  
                    <td col-lg-3><select id="name[]" name="name[]" class="form-control"><option value="">Nama Pegawai</option><?php foreach($pegawai as $key => $value):echo '<option value="'.$key.'">'.addslashes($value).'</option>'; endforeach; ?></select></td>
                    <td><input type="text" name="nobadan[]" placeholder="No Badan" class="form-control name_list" /></td>  
                    <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>  
                </tr>  
            </table>  
            <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />  
        </div>

This is the dynamic added js code:

     <script type="text/javascript">
$(document).ready(function(){      
  var postURL = "<?php echo url('addmore'); ?>";
  var i=1;  


  $('#add').click(function(){  
       i++;  
       $('#dynamic_field').append('<tr id="row'+i+'" class="dynamic-added"><td><select id="pegawai[]" name="pegawai[]" class="form-control name-list"><option value="">Nama Pegawai</option><?php foreach($pegawai as $key => $value):echo '<option value="'.$key.'">'.addslashes($value).'</option>'; endforeach; ?></select></td><td><input type="text" name="nobadan[]" placeholder="No Badan" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');  
  });  


  $(document).on('click', '.btn_remove', function(){  
       var button_id = $(this).attr("id");   
       $('#row'+button_id+'').remove();  
  });  


  $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
  });


  $('#submit').click(function(){            
       $.ajax({  
            url:postURL,  
            method:"POST",  
            data:$('#add_name').serialize(),
            type:'json',
            success:function(data)  
            {
                if(data.error){
                    printErrorMsg(data.error);
                }else{
                    i=1;
                    $('.dynamic-added').remove();
                    $('#add_name')[0].reset();
                    $(".print-success-msg").find("ul").html('');
                    $(".print-success-msg").css('display','block');
                    $(".print-error-msg").css('display','none');
                    $(".print-success-msg").find("ul").append('<li>Record Inserted Successfully.</li>');
                }
            }  
       });  
  });  


  function printErrorMsg (msg) {
     $(".print-error-msg").find("ul").html('');
     $(".print-error-msg").css('display','block');
     $(".print-success-msg").css('display','none');
     $.each( msg, function( key, value ) {
        $(".print-error-msg").find("ul").append('<li>'+value+'</li>');
     });
  }
});  
</script>

I tried this on change jquery but of course fail:

   <script type="text/javascript">
jQuery(document).ready(function ()
{

        $(document).on('change','#pegawai[]',function(){
           var PegID = jQuery(this).val();
           if(PegID)
           {
              jQuery.ajax({
                 url : 'add_demo/get_pegawai/'+PegID,
                 type : "GET",
                 dataType : "json",
                 success:function(data)
                 {
                    console.log(data);
                        $('input[name="nobadan[]"]').val(data.ext);  
                 }
              });
           }
           else
           {
              $('input[name="nobadan"]').empty();

           }
        });
});
</script>


via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire