Reputation: 1245

Give input 'name' attribute for cloned inputs, that is inside a list

So this is my case. I have a unordered list and inside a list a set of inputs and one button that can clone 4 of those inputs. Since data is coming from back-end, there can be one of this list set or 1000. So i am trying to dynamically give name attributes to each input inside the list based on list index number and figure out a way to do that for the cloned inputs also. if you look at the class pm-providerNum I am doing something similar to the provider name so its based on how many lists.if I add more lists the provider name auto change. Back to names, so for li number 1, on each input except the dynamically created ones. each input name would be like this

On dynamic inputs like add location, input name would be :

   <input type="text" name="p-address-0-dynamic#[dynamicnumber]" class="pm-
   psubmit" placeholder="First Name" required="">

etc .... dynamicnumber is the number that says the number of newly created inputs. so if no additional location is added to providor 1/index 1 , each input name on dynamic inputs would be :

     <input type="text" name="p-address-0-dynamic#[0]" class="pm-psubmit" 
     placeholder="First Name" required="">

if I add one additional location. those inputs would name would be

     <input type="text" name="p-address-0-dynamic#[1]" class="pm-psubmit" 
     placeholder="First Name" required="">

on list 2/index 2

    <input type="text" name="p-address-1-dynamic#[0]" class="pm-psubmit" 
    placeholder="First Name" required="">

if i add one additional location. those inputs would name would be

    <input type="text" name="p-address-1-dynamic#[1]" class="pm-psubmit" 
    placeholder="First Name" required="">

I spend some time creating this question, it might be confusing, hopefully, you guys got what I am trying to say. I tried a bunch of different ways to do this without success. Hopefully, I can get some insights

$('.pm-providerNum').each(function (index) {
        $(this).html('Providor ' + (index + 1));
    });

  $("div.pm-providor-first-wrap").each(function (index) {

        $(this).find('input').each(function () {
            $(this).attr('name', $(this).attr('name')+ '-' + index);

        })
    });

$(document).on("click", ".pm-add-loc-Class", function () {
    var $sect = $(this).closest(".pm-loc-section");
    $sect.find(".pm-loc-inputWrapper").eq(0).clone().show().insertBefore($sect.find(".pm-loc-controls")).find('input').val('');
});

<!DOCTYPE html>
<html>
<head>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
	</script>
	<title></title>
</head>
<body>
	<div class="col-sm-12 pm-submitProvidor">
		<ul>
			<li>
				<div class="">
					<h4><span class="pm-providerNum"></span></h4>
					<div class="pm-providor-first-wrap">
						<div class="row">
							<div class="col-md-3">
								<input class="pm-psubmit" name="p-first_name" placeholder="First Name" required="" type="text">
							</div>
							<div class="col-md-1">
								<input class="pm-psubmit" name="p-middle_name" placeholder="M" type="text">
							</div>
							<div class="col-md-2">
								<input class="pm-psubmit" name="p-last_name" placeholder="Last Name" required="" type="text">
							</div>
							<div class="col-md-2">
								<input class="pm-psubmit" name="p-dob" placeholder="Date of birth" required="" type="text">
							</div>
							<div class="col-md-2">
								<input class="pm-psubmit" name="p-personal_num" placeholder="Personal Phone #" type="text">
							</div>
							<div class="col-md-2">
								<input class="pm-psubmit" name="p-personal_email" placeholder="Personal Email" required="" type="text">
							</div>
						</div>
						<div class="row">
							<div class="col-md-3">
								<input class="pm-psubmit" name="p-degree" placeholder="Degree" required="" type="text">
							</div>
							<div class="col-md-3">
								<input class="pm-psubmit" name="p-d_date" placeholder="Date" required="" type="text">
							</div>
							<div class="col-md-3">
								<input class="pm-psubmit" name="p-dobe" placeholder="Data of board exam" required="" type="text">
							</div>
							<div class="col-md-3">
								<input class="pm-psubmit" name="p-nri_num" placeholder="NRI #" required="" type="text">
							</div>
						</div>
						<div class="row">
							<div class="col-md-2">
								<input class="pm-psubmit" name="p-prim_spec" placeholder="Primary Speciality" required="" type="text">
							</div>
							<div class="col-md-2">
								<input class="pm-psubmit" name="p-sec_spec" placeholder="Secondary Speciality" required="" type="text">
							</div>
							<div class="col-md-2">
								<input class="pm-psubmit" name="p-practice_name" placeholder="Practice name" required="" type="text">
							</div>
							<div class="col-md-2">
								<input class="pm-psubmit" name="p-practice_num" placeholder="Practice Phone #" required="" type="text">
							</div>
						</div>
					</div>
					<div class="row" style="padding-left:15px; padding-right:15px;">
						<div class="pm-loc-section">
							<div class="pm-loc-inputWrapper">
								<div class="row">
									<div class="col-md-3">
										<input class="pm-psubmit" placeholder="Practice Physical Address" required="" type="text">
									</div>
									<div class="col-md-2">
										<input class="pm-psubmit" placeholder="City" required="" type="text">
									</div>
									<div class="col-md-1">
										<input class="pm-psubmit" placeholder="State" required="" type="text">
									</div>
									<div class="col-md-2">
										<input class="pm-psubmit" placeholder="Zip" required="" type="text">
									</div>
									<div class="col-md-4"></div>
								</div>
							</div>
							<div class="pm-loc-controls text-right">
								<input class="pm-add-loc-Class" type="button" value="+ Add Another Location">
							</div>
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="">
					<h4><span class="pm-providerNum"></span></h4>
					<div class="pm-providor-first-wrap">
						<div class="row">
							<div class="col-md-3">
								<input class="pm-psubmit" name="p-first_name" placeholder="First Name" required="" type="text">
							</div>
							<div class="col-md-1">
								<input class="pm-psubmit" name="p-middle_name" placeholder="M" type="text">
							</div>
							<div class="col-md-2">
								<input class="pm-psubmit" name="p-last_name" placeholder="Last Name" required="" type="text">
							</div>
							<div class="col-md-2">
								<input class="pm-psubmit" name="p-dob" placeholder="Date of birth" required="" type="text">
							</div>
							<div class="col-md-2">
								<input class="pm-psubmit" name="p-personal_num" placeholder="Personal Phone #" type="text">
							</div>
							<div class="col-md-2">
								<input class="pm-psubmit" name="p-personal_email" placeholder="Personal Email" required="" type="text">
							</div>
						</div>
						<div class="row">
							<div class="col-md-3">
								<input class="pm-psubmit" name="p-degree" placeholder="Degree" required="" type="text">
							</div>
							<div class="col-md-3">
								<input class="pm-psubmit" name="p-d_date" placeholder="Date" required="" type="text">
							</div>
							<div class="col-md-3">
								<input class="pm-psubmit" name="p-dobe" placeholder="Data of board exam" required="" type="text">
							</div>
							<div class="col-md-3">
								<input class="pm-psubmit" name="p-nri_num" placeholder="NRI #" required="" type="text">
							</div>
						</div>
						<div class="row">
							<div class="col-md-2">
								<input class="pm-psubmit" name="p-prim_spec" placeholder="Primary Speciality" required="" type="text">
							</div>
							<div class="col-md-2">
								<input class="pm-psubmit" name="p-sec_spec" placeholder="Secondary Speciality" required="" type="text">
							</div>
							<div class="col-md-2">
								<input class="pm-psubmit" name="p-practice_name" placeholder="Practice name" required="" type="text">
							</div>
							<div class="col-md-2">
								<input class="pm-psubmit" name="p-practice_num" placeholder="Practice Phone #" required="" type="text">
							</div>
						</div>
					</div>
					<div class="row" style="padding-left:15px; padding-right:15px;">
						<div class="pm-loc-section">
							<div class="pm-loc-inputWrapper">
								<div class="row">
									<div class="col-md-3">
										<input class="pm-psubmit" placeholder="Practice Physical Address" required="" type="text">
									</div>
									<div class="col-md-2">
										<input class="pm-psubmit" placeholder="City" required="" type="text">
									</div>
									<div class="col-md-1">
										<input class="pm-psubmit" placeholder="State" required="" type="text">
									</div>
									<div class="col-md-2">
										<input class="pm-psubmit" placeholder="Zip" required="" type="text">
									</div>
									<div class="col-md-4"></div>
								</div>
							</div>
							<div class="pm-loc-controls text-right">
								<input class="pm-add-loc-Class" type="button" value="+ Add Another Location">
							</div>
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="">
					<h4><span class="pm-providerNum"></span></h4>
					<div class="pm-providor-first-wrap">
						<div class="row">
							<div class="col-md-3">
								<input class="pm-psubmit" name="p-first_name" placeholder="First Name" required="" type="text">
							</div>
							<div class="col-md-1">
								<input class="pm-psubmit" name="p-middle_name" placeholder="M" type="text">
							</div>
							<div class="col-md-2">
								<input class="pm-psubmit" name="p-last_name" placeholder="Last Name" required="" type="text">
							</div>
							<div class="col-md-2">
								<input class="pm-psubmit" name="p-dob" placeholder="Date of birth" required="" type="text">
							</div>
							<div class="col-md-2">
								<input class="pm-psubmit" name="p-personal_num" placeholder="Personal Phone #" type="text">
							</div>
							<div class="col-md-2">
								<input class="pm-psubmit" name="p-personal_email" placeholder="Personal Email" required="" type="text">
							</div>
						</div>
						<div class="row">
							<div class="col-md-3">
								<input class="pm-psubmit" name="p-degree" placeholder="Degree" required="" type="text">
							</div>
							<div class="col-md-3">
								<input class="pm-psubmit" name="p-d_date" placeholder="Date" required="" type="text">
							</div>
							<div class="col-md-3">
								<input class="pm-psubmit" name="p-dobe" placeholder="Data of board exam" required="" type="text">
							</div>
							<div class="col-md-3">
								<input class="pm-psubmit" name="p-nri_num" placeholder="NRI #" required="" type="text">
							</div>
						</div>
						<div class="row">
							<div class="col-md-2">
								<input class="pm-psubmit" name="p-prim_spec" placeholder="Primary Speciality" required="" type="text">
							</div>
							<div class="col-md-2">
								<input class="pm-psubmit" name="p-sec_spec" placeholder="Secondary Speciality" required="" type="text">
							</div>
							<div class="col-md-2">
								<input class="pm-psubmit" name="p-practice_name" placeholder="Practice name" required="" type="text">
							</div>
							<div class="col-md-2">
								<input class="pm-psubmit" name="p-practice_num" placeholder="Practice Phone #" required="" type="text">
							</div>
						</div>
					</div>
					<div class="row" style="padding-left:15px; padding-right:15px;">
						<div class="pm-loc-section">
							<div class="pm-loc-inputWrapper">
								<div class="row">
									<div class="col-md-3">
										<input class="pm-psubmit" placeholder="Practice Physical Address" required="" type="text">
									</div>
									<div class="col-md-2">
										<input class="pm-psubmit" placeholder="City" required="" type="text">
									</div>
									<div class="col-md-1">
										<input class="pm-psubmit" placeholder="State" required="" type="text">
									</div>
									<div class="col-md-2">
										<input class="pm-psubmit" placeholder="Zip" required="" type="text">
									</div>
									<div class="col-md-4"></div>
								</div>
							</div>
							<div class="pm-loc-controls text-right">
								<input class="pm-add-loc-Class" type="button" value="+ Add Another Location">
							</div>
						</div>
					</div>
				</div>
			</li>
		</ul>
    </div>
</body>
</html>

Upvotes: 0

Answers (1)

Drew G

Reputation: 282

I would do it this way: For each "providor" group have all the input name attributes begin with something like provider[index] and then have each particular field's name be a second dimension input: provider[1][firstname], provider[1][lastname], etc.

Then, for your location fields, add an additional index to the end to indicate which location group it's part of:

provider[1][city][1]
provider[1][state][1]
provider[1][city][2]
provider[1][state][2]

etc.

You can also use the .data() function to store the providor index and location index in a manner you can later grab more easily.

Here is a working example:

 $('.pm-providerInputGroup').each(function (index)
 {
 
 	var inputGroupId = index + 1;
 	var groupEl = $(this);
 	
 	groupEl.data('groupId', inputGroupId);
 	
 	groupEl.find('.pm-providerNum').html('Providor ' + inputGroupId);
 	
 	groupEl.find('.pm-psubmit').each(function()
 	{
 		var cleanName = $(this).attr('placeholder').toLowerCase().replace(/[^a-z0-9]+/g, '');
 		$(this).attr('name', 'providor[' + inputGroupId + '][' + cleanName + ']');
 	});
 	
 	groupEl.find('.pm-loc-section .pm-loc-inputWrapper').each(function(index2)
 	{
 		var locGroupId = index2 + 1;
 		
 		$(this).data('locGroupId', locGroupId);
 		
 		$(this).find('.pm-psubmit').each(function()
 		{
 			var curName = $(this).attr('name');
 			$(this).attr('name', curName + '[' + locGroupId + ']');
 		});
 	});
 
 });
 
 
 $(document).on("click", ".pm-add-loc-Class", function()
 {
     var $sect = $(this).closest(".pm-loc-section");
 
     var lastLocGroup = $sect.find(".pm-loc-inputWrapper").eq(-1);
 
 	var lastLocGroupId = lastLocGroup.data('locGroupId');
 
     var newLocGroup = lastLocGroup.clone();
 
 	var newLocGroupId = lastLocGroupId+1;
 
     newLocGroup.show().insertBefore($sect.find(".pm-loc-controls")).find('input').val('');
     
     newLocGroup.data('locGroupId', newLocGroupId);
 
     newLocGroup.find('.pm-psubmit').each(function(index2)
 	{
 		var curName = $(this).attr('name');
 		var newName = curName.replace(/(\w+\[[^\]]+\]\[[^\]]+\])(\[[^\]]+\])/, '$1[' + newLocGroupId + ']' );
 		$(this).attr('name', newName);
 	});
 });

 <!DOCTYPE html>
 <html>
 <head>
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 	<title></title>
 </head>
 <body>
 	<div class="col-sm-12 pm-submitProvidor">
 		<ul>
 			<li>
 				<div class="pm-providerInputGroup">
 
 					<h4><span class="pm-providerNum"></span></h4>
 
 					<input class="pm-psubmit" placeholder="First Name" required="" type="text">
 					<input class="pm-psubmit" placeholder="M" type="text">
 					<input class="pm-psubmit" placeholder="Last Name" required="" type="text">
 					<input class="pm-psubmit" placeholder="Date of birth" required="" type="text">
 					<input class="pm-psubmit" placeholder="Personal Phone #" type="text">
 					<input class="pm-psubmit" placeholder="Personal Email" required="" type="text">
 					<input class="pm-psubmit" placeholder="Degree" required="" type="text">
 					<input class="pm-psubmit" placeholder="Date" required="" type="text">
 					<input class="pm-psubmit" placeholder="Data of board exam" required="" type="text">
 					<input class="pm-psubmit" placeholder="NRI #" required="" type="text">
 					<input class="pm-psubmit" placeholder="Primary Speciality" required="" type="text">
 					<input class="pm-psubmit" placeholder="Secondary Speciality" required="" type="text">
 					<input class="pm-psubmit" placeholder="Practice name" required="" type="text">
 					<input class="pm-psubmit" placeholder="Practice Phone #" required="" type="text">
 
 					<div class="row" style="padding-left:15px; padding-right:15px;">
 						<div class="pm-loc-section">
 							<div class="pm-loc-inputWrapper">
 								<div class="row">
 									<div class="col-md-3">
 										<input class="pm-psubmit" placeholder="Practice Physical Address" required="" type="text">
 									</div>
 									<div class="col-md-2">
 										<input class="pm-psubmit" placeholder="City" required="" type="text">
 									</div>
 									<div class="col-md-1">
 										<input class="pm-psubmit" placeholder="State" required="" type="text">
 									</div>
 									<div class="col-md-2">
 										<input class="pm-psubmit" placeholder="Zip" required="" type="text">
 									</div>
 									<div class="col-md-4"></div>
 								</div>
 							</div>
 							<div class="pm-loc-controls text-right">
 								<input class="pm-add-loc-Class" type="button" value="+ Add Another Location">
 							</div>
 						</div>
 					</div>
 				</div>
 			</li>
 			<li>
 				<div class="pm-providerInputGroup">
 
 					<h4><span class="pm-providerNum"></span></h4>
 
 					<input class="pm-psubmit" placeholder="First Name" required="" type="text">
 					<input class="pm-psubmit" placeholder="M" type="text">
 					<input class="pm-psubmit" placeholder="Last Name" required="" type="text">
 					<input class="pm-psubmit" placeholder="Date of birth" required="" type="text">
 					<input class="pm-psubmit" placeholder="Personal Phone #" type="text">
 					<input class="pm-psubmit" placeholder="Personal Email" required="" type="text">
 					<input class="pm-psubmit" placeholder="Degree" required="" type="text">
 					<input class="pm-psubmit" placeholder="Date" required="" type="text">
 					<input class="pm-psubmit" placeholder="Data of board exam" required="" type="text">
 					<input class="pm-psubmit" placeholder="NRI #" required="" type="text">
 					<input class="pm-psubmit" placeholder="Primary Speciality" required="" type="text">
 					<input class="pm-psubmit" placeholder="Secondary Speciality" required="" type="text">
 					<input class="pm-psubmit" placeholder="Practice name" required="" type="text">
 					<input class="pm-psubmit" placeholder="Practice Phone #" required="" type="text">
 
 					<div class="row" style="padding-left:15px; padding-right:15px;">
 						<div class="pm-loc-section">
 							<div class="pm-loc-inputWrapper">
 								<div class="row">
 									<div class="col-md-3">
 										<input class="pm-psubmit" placeholder="Practice Physical Address" required="" type="text">
 									</div>
 									<div class="col-md-2">
 										<input class="pm-psubmit" placeholder="City" required="" type="text">
 									</div>
 									<div class="col-md-1">
 										<input class="pm-psubmit" placeholder="State" required="" type="text">
 									</div>
 									<div class="col-md-2">
 										<input class="pm-psubmit" placeholder="Zip" required="" type="text">
 									</div>
 									<div class="col-md-4"></div>
 								</div>
 							</div>
 							<div class="pm-loc-controls text-right">
 								<input class="pm-add-loc-Class" type="button" value="+ Add Another Location">
 							</div>
 						</div>
 					</div>
 
 				</div>
 			</li>
 		</ul>
 	</div>
 
 </body>
 </html>

Upvotes: 1

Give input &#39;name&#39; attribute for cloned inputs, that is inside a list

Answers (1)

Related Questions

Give input 'name' attribute for cloned inputs, that is inside a list