Jump to content

Simple Clone Row

Go to solution Solved by Adamhumbug,

Recommended Posts

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...">
	<!--  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>
						<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 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 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">
<!-- end clone here -->
<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 by Adamhumbug
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by denno020
Moving MDN Docs link
Link to comment
Share on other sites

  • Solution

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.

function myF() {
	var chunk = document.getElementById('newMenuItemLine'+i);
	var clone = chunk.cloneNode(true);
	chunk.setAttribute("id", "newMenuItemLine" +i);


Link to comment
Share on other sites

This thread is more than a year old. Are you sure you have something important to add to it?

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.