Can someone help me figure out how to clone a specic section of html when a link is clicked?
When the user clicks
<a href="" onClick="cloneDiv();" >Add Additional Positions:</a>
I want to duplicate this entire fieldset
<fieldset id='addPosition'>
<legend>Add Project Position:</legend>
<li>
<label for="positions">Position:</label>
<select name='genre' >
<option value="1">Actor</option>
<option value="2">Actress</option>
<option value="3">Director</option>
<option value="4">Cinematographer</option>
<option value="5">Producer</option>
<option value="6">Writer</option>
<option value="7">Miscellaneous Crew</option>
<option value="8">Animator</option>
<option value="9">Sound Mixer</option>
</select>
<span class="form_hint">Select Position. </span>
</li>
<li>
<label for="job_title">Position Title:</label>
<input type="text" name="project_title" placeholder="Project Title" />
<span class="form_hint">Enter a title/name for position</span>
</li>
<li>
<label for="job_detail">Position Detail:</label>
<textarea name="job_detail" cols="40" rows="4"></textarea>
</li>
</fieldset>
here is the start of my function. I’m not sure how to use the clone method or how to display what it clones. I want the new fieldset to appear below the fieldset it cloned and above the link. I included the entire file with a comment indicating where I need it to go.
<script language="JavaScript">
function cloneDiv(){
var clonenode = document.getElementById("addPosition");
//alert();
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Upload Project</title>
<link rel="stylesheet" media="screen" href="css/form.css" >
<script language="JavaScript">
function cloneDiv(){
//var clonenode = document.getElementById("addPosition");
alert();
}
</script>
</head>
<body>
<form class="contact_form" action="scripts/procProjectForm.php" method="post" name="contact_form" enctype="multipart/form-data">
<ul>
<li>
<h2>Start A Project</h2>
<span class="required_notification">* Denotes Required Field</span>
</li>
<li>
<label for="project_title">Project Title:</label>
<input type="text" name="project_title" placeholder="Project Title" required />
<span class="form_hint">Enter a title for new project</span>
</li>
<fieldset id='addPosition'>
<legend>Add Project Position:</legend>
<li>
<label for="positions">Position:</label>
<select name='genre' >
<option value="1">Actor</option>
<option value="2">Actress</option>
<option value="3">Director</option>
<option value="4">Cinematographer</option>
<option value="5">Producer</option>
<option value="6">Writer</option>
<option value="7">Miscellaneous Crew</option>
<option value="8">Animator</option>
<option value="9">Sound Mixer</option>
</select>
<span class="form_hint">Select Position. </span>
</li>
<li>
<label for="job_title">Position Title:</label>
<input type="text" name="project_title" placeholder="Project Title" />
<span class="form_hint">Enter a title/name for position</span>
</li>
<li>
<label for="job_detail">Position Detail:</label>
<textarea name="job_detail" cols="40" rows="4"></textarea>
</li>
</fieldset>
<!-- cloned fieldset goes here-->
<fieldset>
<legend><a href="" onClick="cloneDiv();" >Add Additional Positions:</a></legend>
</fieldset>
<li>
<button class="submit" type="submit" value="Upload">Submit Form</button>
</li>
</ul>
</form>
</body>
</html>
Using cloneNode is how you would copy it.
I was hoping to get some help on the actual syntax for how to insert the cloned code.
The link Paul gave you has an example of how to use it along with a nice explanation.
I was still hoping to get some help on this.
I’ve read through the link above and I’m still having trouble with the syntax.
here is what I have:
<script language="JavaScript">
function cloneFieldset(){
var fieldset = document.getElementById("addPosition");
var newFieldset = fieldset.cloneNode(true);
document.getElementById('addPosition').appendChild(newFieldset);
}
</script>
That works for me. It clones a copy of the fieldset within itself.
I presume that your intentions are to achieve something else?
I want to duplicate the entire fieldset (id=‘addPosition’) and everything inside of that fieldset. Then add it right after the duplicated fieldset so there are two of them.
How do you want to deal with elements that have unique identifiers? They must be unique, which means either getting rid of unique identifiers completely within the form (easily done) or using lots of scripting to change them to something else (less preferred)
Ah I forgot about that. Is that what was messing it up? I guess I could change the id to a class
The best practice is to uniquely id the form itself, and use the elements collection to work with named fields.
For example:
<form id="login">
<p><label><input name="username"></label></p>
...
</form>
var form = document.getElementById('username');
var username = form.elements.username.value;
...
I don’t understand. I’m not trying to duplicate the entire form just the fieldset. When the user clicks the Add Additional Positions link I want to add this after the first one.
<fieldset class='addPosition'>
<legend>Add Project Position:</legend>
<li>
<label for="positions">Position:</label>
<select name='genre' >
<option value="1">Actor</option>
<option value="2">Actress</option>
<option value="3">Director</option>
<option value="4">Cinematographer</option>
<option value="5">Producer</option>
<option value="6">Writer</option>
<option value="7">Miscellaneous Crew</option>
<option value="8">Animator</option>
<option value="9">Sound Mixer</option>
</select>
<span class="form_hint">Select Position. </span>
</li>
<li>
<label for="job_title">Position Title:</label>
<input type="text" name="project_title" placeholder="Project Title" />
<span class="form_hint">Enter a title/name for position</span>
</li>
<li>
<label for="job_detail">Position Detail:</label>
<textarea name="job_detail" cols="40" rows="4"></textarea>
</li>
</fieldset>
This is what the form should look like after the user clicks the Add Additional Positions: link
<form class="contact_form" action="scripts/procProjectForm.php" method="post" name="contact_form" enctype="multipart/form-data">
<ul>
<li>
<h2>Start A Project</h2>
<span class="required_notification">* Denotes Required Field</span>
</li>
<li>
<label for="project_title">Project Title:</label>
<input type="text" name="project_title" placeholder="Project Title" required />
<span class="form_hint">Enter a title for new project</span>
</li>
<fieldset class='addPosition'>
<legend>Add Project Position:</legend>
<li>
<label for="positions">Position:</label>
<select name='genre' >
<option value="1">Actor</option>
<option value="2">Actress</option>
<option value="3">Director</option>
<option value="4">Cinematographer</option>
<option value="5">Producer</option>
<option value="6">Writer</option>
<option value="7">Miscellaneous Crew</option>
<option value="8">Animator</option>
<option value="9">Sound Mixer</option>
</select>
<span class="form_hint">Select Position. </span>
</li>
<li>
<label for="job_title">Position Title:</label>
<input type="text" name="project_title" placeholder="Project Title" />
<span class="form_hint">Enter a title/name for position</span>
</li>
<li>
<label for="job_detail">Position Detail:</label>
<textarea name="job_detail" cols="40" rows="4"></textarea>
</li>
</fieldset>
<!-- cloned fieldset -->
<fieldset class='addPosition'>
<legend>Add Project Position:</legend>
<li>
<label for="positions">Position:</label>
<select name='genre' >
<option value="1">Actor</option>
<option value="2">Actress</option>
<option value="3">Director</option>
<option value="4">Cinematographer</option>
<option value="5">Producer</option>
<option value="6">Writer</option>
<option value="7">Miscellaneous Crew</option>
<option value="8">Animator</option>
<option value="9">Sound Mixer</option>
</select>
<span class="form_hint">Select Position. </span>
</li>
<li>
<label for="job_title">Position Title:</label>
<input type="text" name="project_title" placeholder="Project Title" />
<span class="form_hint">Enter a title/name for position</span>
</li>
<li>
<label for="job_detail">Position Detail:</label>
<textarea name="job_detail" cols="40" rows="4"></textarea>
</li>
</fieldset>
<!-- end of cloned fieldset -->
<fieldset>
<legend><a href="" onClick="cloneFieldset();" >Add Additional Positions:</a></legend>
</fieldset>
<li>
<button class="submit" type="submit" value="Upload">Submit Form</button>
</li>
</ul>
</form>
The standard way to add after something, is to insert it before the next sibling.
fieldset.parentNode.insertBefore(clonedFieldset, fieldset.nextSibling)
I tried this and it doesn’t work.
<script language="JavaScript">
function cloneFieldset(){
var fieldset = document.getElementsByTagNames('fieldset');
var newFieldset = fieldset.cloneNode(true);
fieldset.insertBefore(newFieldset, fieldset.nextSibling);
}
</script>
It needs to be the parent node of the fieldset that the insertBefore is applied to. The sample code in my previous post has now been updated to reflect that.
Thanks anyway Paul.
I don’t understand your posts.
I’ll find help elsewhere and post it back here when I’m done to help out others trying to do the same thing.