Thursday, November 26, 2020

Add More Multiple Div and remove div

  <div id="employeement_more">

    <div class="row employeementAppendDiv" style="border-top: 1px dotted #d3d3d3; margin-top: 40px;">

    <input type="hidden" class="index" name="employeement[0][index]" value="0"/>

   <div class="col-md-6">

           <div class="form-group">

                   <label for="designation">Designation</label>

                    <input type="text" name="employeement[0][designation]"  class="form-control designation">

              </div>

            </div>

<div class="col-md-6"> 

        <button type="button" class="btn btn-danger btn-sm remove_from_list_div d-none" style="position: absolute;">

          <i class="fa fa-times"></i>

         </button> 

       </div>

</div>

<div>



<div class="pull-right"

     <button type="button" class="btn btn-success btn-sm pull-right addMoreEmployeement"><span             class="fa fa-plus"></span> Add More</button>  

</div>




$('.addMoreEmployeement').on('click', function(){


            var last_index=$('.employeementAppendDiv').last().index();   


            var cloned=$('.employeementAppendDiv').last().clone(true);


            cloned.find(".remove_from_list_div" ).removeClass('hidden');


            cloned.find(".index" ).attr('name', "employeement["+(last_index+1)+"][index]").val(last_index+1);


            cloned.find(".designation" ).attr('name', "employeement["+(last_index+1)+"][designation]").val('');


            cloned.find(".job_category_department" ).attr('name', "employeement["+(last_index+1)+"][job_category_department]").val('');


            //cloned.find(".duration" ).attr('name', "employeement["+(last_index+1)+"][duration]"); 

            cloned.find(".start_date" ).attr('name', "employeement["+(last_index+1)+"][start_date]").val(''); 

            cloned.find(".end_date" ).attr('name', "employeement["+(last_index+1)+"][end_date]").val(''); 

            cloned.find(".company" ).attr('name', "employeement["+(last_index+1)+"][company]").val('');


            cloned.appendTo( "#employeement_more" );


        });



///////////////////// Remove div ///////////////////////////////


        $('.remove_from_list_div').on('click', function(){


           $(this).closest('.employeementAppendDiv').remove();


        });



////////////////////// Dynamic Datepicker Added /////////////////////////////



  $('body').on('focus',".start_date", function(){  

     $(this).removeClass('hasDatepicker').removeAttr('id').datepicker({

         dateFormat : 'dd/mm/yy',

         changeMonth : true,

         changeYear : true,

         yearRange: '-100y:c+nn',

         maxDate: '-1d'

      });  

   }); 

No comments:

Post a Comment

Ajax load lage with laravel.

 step-1:  HTML <div class="row">                     <div class="col-lg-12">                           <d...