multiple input clone jquery without value and datepicker problem

Viewed 25

Hi this is my code for clone from multiple inputs

<div style="margin-top: 10px;" class="customer_records">
  <div class="form-group">
<input type="text" class="form-control" name="kala[]" placeholder="کالا" required>
</div>
<div class="form-group">
<input type="text" class="form-control" name="weight[]" placeholder="وزن خالص">
</div>
<div class="form-group">
<input type="text" class="date form-control" name="date[]" placeholder="تاریخ">
</div>
<div class="form-group">
<input type="text" placeholder="شماره قبض" name="receipt[]" class="form-control">
</div>
<a class="extra-fields-customer"><i class="icon-plus-squared text-success"></i></a>
</div>
<div class="customer_records_dynamic"></div>


<script>
      $('.extra-fields-customer').click(function() {
            $('.customer_records').clone().appendTo('.customer_records_dynamic');
            $('.customer_records_dynamic .customer_records').addClass('single remove');
            $('.single .extra-fields-customer').remove();
            $('.single').append('<a href="#" class="remove-field btn-remove-customer"><i class="icon-cancel-squared text-danger"></i></a>');
            $('.customer_records_dynamic > .single').attr("class", "remove");
            $('.customer_records_dynamic').attr("value", "");
            $(this).find('input').val('').end();

      });


      $(document).on('click', '.remove-field', function(e) {
            $(this).parent('.remove').remove();
            e.preventDefault();
      });
      $(".date").persianDatepicker({
            showGregorianDate: false,
            formatDate: "YYYY-0M-0D"
      });
</script>

This is my problem with this code I want the value to be empty when it clones a row And do not take the amount of the first input

And another problem I have is that only my first input accepts the date and the simulated inputs do not show the date selector

1 Answers

You should assign a variable for your clone so you can run a couple methods on it after the fact

$clone = $('.customer_records').clone().appendTo('.customer_records_dynamic');

This is my problem with this code I want the value to be empty when it clones a row And do not take the amount of the first input

You should be able to then do something like this

$clone.find('input').val('');

And another problem I have is that only my first input accepts the date and the simulated inputs do not show the date selector

This is because the new date control is created after that initialization script runs. Not sure if you can create a delegate for that, so you might want to just run the init directly on it, like

  $clone.find('input.date').persianDatepicker({
        showGregorianDate: false,
        formatDate: "YYYY-0M-0D"
  });
Related