How to change name attribute after clone using jQuery?

Question

I have following HTML code:

<div class="multiple_tour_wrap">
   <div class="row">
      <div class="col-md-12">
         <div class="form-group">
            <h5 class="badge badge-details multiple_counting">Details 1</h5><hr><br/>
         </div>
      </div>
      <div class="col-md-4">
         <div class="form-group">
            <label>Guest Name</label>
            <input type="text" name="mul_gname[0]" class="form-control" placeholder="Guest name">
         </div>
      </div>
      <div class="col-md-4">
         <div class="form-group">
            <label>Email Address</label>
            <input type="email" name="mul_email[0]" class="form-control" placeholder="Email Address">
         </div>
      </div>
   </div>
   <div class="trip_wrapper">
      <div class="col-md-1">
         <div class="form-group">
            <h5 class="badge badge-success trip_counting">Trip 3</h5>
         </div>
      </div>
      <div class="col-md-4">
         <div class="form-group">
            <label>From</label>
            <input type="text" name="mul_from[0]" class="form-control" placeholder="From">
         </div>
      </div>
      <div class="col-md-12">
         <div class="change_trip text-right">
            <a class="btn add_button_trip trip_btn">Add Trip(+)</a>
         </div>
      </div>
   </div> <!--end trip_wrpapper -->
   <div class="row">
      <div class="col-md-12">
         <div class="form-group multiple_change text-right">
            <a class="btn multiple_add_button add_more add_more_btn"><strong>Add More Details (+)</strong></a>
         </div>
      </div>
   </div>
</div> <!--end multiple_tour_wrap -->

Here 2 link exists to add more fields.

1) Add More Details (+) (using class multiple_add_button)
2) Add Trip (+) ( Using class add_button_trip)

Add More details (+) link clone the full multiple_tour_wrap class div and Add Trip (+) clone the trip_wrapper div. I have set the name as an array with key [0] because I need to add more fields

and

For that, I need to add 1 for the all-name array when one more field is added. So the name will be:

mul_gname[1]
mul_email[1]
mul_from[1]
mul_to[1]

if 2 more fields added then it will be 2, 3, 4 and so one.

I am using jQuery clone method to add more fields but how can I change the name when adding more fields?

jQuery Code:

$("body").on("click",".multiple_add_button",function(){
   var html = $(".multiple_tour_wrap").first().clone();      
   $(".multiple_tour_wrap").last().after(html);

   $('.multiple_counting').each(function(i, elm) {
      $(elm).text('Detail ' + (i + 1));
   });
});

$("body").on("click",".remove",function(){
   $(this).parents(".multiple_tour_wrap").remove();
});

DesignMonkeyJim · Accepted Answer · 2018-08-08 08:36:40Z

I have just cut down the amount of code so you can see how this works.

I have added the class 'guest_name' input field in the html so it can be targeted in the jQuery

<input class="guest_name" type="text" name="mul_gname[0]" class="form-control" placeholder="Guest name">

jQuery:

var count = 1; // Create a count

$("body").on("click",".multiple_add_button",function(){

   var html = $(".multiple_tour_wrap").first().clone(); 
       html.find('.guest_name').attr({ name: "mul_gname["+count+"]"});//use the count to update this clone field
       // you can update all the attributes here before the clone is added
       $(".multiple_tour_wrap").last().after(html);//add the clone
   
   count++; // increase the count

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multiple_tour_wrap">
   <div class="row">
      <div class="col-md-12">
         <div class="form-group">
            <h5 class="badge badge-details multiple_counting">Details 1</h5><hr><br/>
         </div>
      </div>
      <div class="col-md-4">
         <div class="form-group">
            <label>Guest Name</label>
            <input class="guest_name" type="text" name="mul_gname[0]" class="form-control" placeholder="Guest name">
         </div>
      </div>
   </div> <!--end trip_wrpapper -->
   <div class="row">
      <div class="col-md-12">
         <div class="form-group multiple_change text-right">
            <a class="btn multiple_add_button add_more add_more_btn"><strong>Add More Details (+)</strong></a>
         </div>
      </div>
   </div>
</div> <!--end multiple_tour_wrap -->

Collectives™ on Stack Overflow

How to change name attribute after clone using jQuery?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related