Simple Clone Row

[Adamhumbug]

Hi All,

I have posted something on here before that was a lot more complicated that what i am trying to achieve here.

I have not worked through the understanding of this yet so was hoping that a more simple method might give me a better start.

I have the following HTML and i am looking to, on button click, add a new line with the same html.

This will be part of a form so will need to be able to be submitted.

I have been playing around with jquery but as i am learning i prefer javascript as i can see on each line what is happening.

The html is

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">


<form action="">
					<div class="input-group input-group-lg m-5" style="width:auto;">
						<input class="form-control text-center " type="text" placeholder="Enter Menu Name...">
					</div>
	<!--  start clone from here -->
					<div id="newMenuItemLine" class="input-group mb-3">
						<div class="input-group-prepend">
							<span class="input-group-text" id="inputGroup-sizing-default">Menu Item</span>
						</div>
						<textarea name="newMenuItem[]" type="text" class="form-control" style="height:60px;"></textarea>
						<div class="input-group-text">
							<div class="form-check form-check-inline mr-0">
								<input name="newMenuItemVegi[]" class="form-check-input" type="checkbox" data-toggle="toggle"
								data-style="mr-1" data-on="Vegitarian" data-off="Not Vegi" data-onstyle="success" data-offstyle="danger" data-size="sm">
							</div>
							<div class="form-check form-check-inline mr-0">
								<input name="newMenuItemVegan[]" class="form-check-input" type="checkbox" data-toggle="toggle"
								data-style="mr-1" data-on="Vegan" data-off="Not Vegan" data-onstyle="success" data-offstyle="danger" data-size="sm">
							</div>
							<div class="form-check form-check-inline mr-0">
								<input name="newMenuItemGf[]" class="form-check-input" type="checkbox" data-toggle="toggle"
								data-style="" data-on="Gluten Free" data-off="Not GF" data-onstyle="success" data-offstyle="danger" data-size="sm">
							</div>
						</div>
					</div>
<!-- end clone here -->
				</form>
<div id="newRowButton" class="btn btn-primary float-right">New Line</div>

I have added the bootstrap link to make it more clear if copying into something like liveweave

Edited January 14, 2020 by Adamhumbug

[requinix]

I know you said you're learning Javascript and want to understand what's going on, but this really is one of those times that using jQuery is helpful.

You can't easily determine the original HTML because it's mostly gone by the time your code is running (the browser turned it into objects in memory instead), but you can clone the elements and add the copy into the page. The downside is that you'll be cloning the objects as they exist at that moment, including whatever changes the user has made to them like by typing in the textbox or selecting a menu item.

But ignore that for the moment. Try using jQuery to find the row element, clone it, and add it wherever.

[denno020]

I completely agreed with @requinix, this is a situation where jQuery excels, and will save you a lot of time and headache. It's definitely possible to do this with vanilla JS, but it's a lot more code.

One suggestion I will make is to use a `<template>` element, which can contain the HTML that you will clone. This way you don't have to clone an existing HTML DOM node, which will contain user changes and would require you to go through each field and clear the values of the inputs/textarea before injecting it into the page as a new node. Check out the MDN docs for `template`, they have great example code (which is actually in vanilla JS, so you can see how much is required!)

Another thing I would suggest is to avoid using a `div` as a button. The New Line "button" has the `btn` class on it, but it's a div. This will be inaccessible to site visitors, so best to use a `button` element, with those same classes.

 

P.s. Please excuse the use of back ticks, it appears the forum doesn't support markdown

Edited January 14, 2020 by denno020
Moving MDN Docs link

[Adamhumbug]

HI Both,

Thanks for your info here - before seeing your replies, i wrote the following which seems to do what i want but as you said, it copies all of the content with it.

I will have a look at cleaning this up and will post the new version once finalized.

i=0;
function myF() {
	console.log(i)
	var chunk = document.getElementById('newMenuItemLine'+i);
	var clone = chunk.cloneNode(true);
	i++;
	chunk.setAttribute("id", "newMenuItemLine" +i);
	document.getElementById('wrapper').appendChild(clone);
	
}