How to clone a section of html and display it

**aaron4osu** · Apr 6, 2012 04:41

Can someone help me figure out how to clone a specic section of html when a link is clicked?

When the user clicks

HTML Code:

<a href="" onClick="cloneDiv();" >Add Additional Positions:</a>

I want to duplicate this entire fieldset

HTML Code:

<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.

HTML Code:

<script language="JavaScript">
  
  function cloneDiv(){
     var clonenode = document.getElementById("addPosition");
     //alert();
     
  } 

</script>

HTML Code:

<!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>

**paul_wilkins** · Apr 7, 2012 05:49

Using cloneNode is how you would copy it.

**aaron4osu** · Apr 7, 2012 06:42

I was hoping to get some help on the actual syntax for how to insert the cloned code.

**chris.upjohn** · Apr 7, 2012 18:07

The link Paul gave you has an example of how to use it along with a nice explanation.

**aaron4osu** · Apr 12, 2012 03:56

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:

Code:

<script language="JavaScript">
  
  function cloneFieldset(){

     var fieldset = document.getElementById("addPosition");
     var newFieldset = fieldset.cloneNode(true);
     document.getElementById('addPosition').appendChild(newFieldset);     
  } 

</script>

**paul_wilkins** · Apr 12, 2012 03:59

That works for me. It clones a copy of the fieldset within itself.

I presume that your intentions are to achieve something else?

**aaron4osu** · Apr 12, 2012 04:18

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.

**paul_wilkins** · Apr 12, 2012 04:19

Originally Posted by aaron4osu

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)

**aaron4osu** · Apr 12, 2012 04:21

Ah I forgot about that. Is that what was messing it up? I guess I could change the id to a class

**paul_wilkins** · Apr 12, 2012 04:23

Originally Posted by aaron4osu

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:

Code html4strict:

<form id="login">
    <p><label><input name="username"></label></p>
    ...
</form>

Code javascript:

var form = document.getElementById('username');
var username = form.elements.username.value;
...

**aaron4osu** · Apr 12, 2012 04:30

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.

Code:

<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>

**aaron4osu** · Apr 12, 2012 05:00

This is what the form should look like after the user clicks the Add Additional Positions: link

Code:

<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>

**paul_wilkins** · Apr 12, 2012 05:02

The standard way to add after something, is to insert it before the next sibling.
https://developer.mozilla.org/en/DOM/Node.insertBefore

fieldset.parentNode.insertBefore(clonedFieldset, fieldset.nextSibling)

**aaron4osu** · Apr 12, 2012 05:09

I tried this and it doesn't work.

Code:

<script language="JavaScript">
  
  function cloneFieldset(){

     var fieldset = document.getElementsByTagNames('fieldset');
     var newFieldset = fieldset.cloneNode(true);
     fieldset.insertBefore(newFieldset, fieldset.nextSibling); 

  } 

</script>

**paul_wilkins** · Apr 12, 2012 05:15

Originally Posted by aaron4osu

I tried this and it doesn't work.

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.

**aaron4osu** · Apr 12, 2012 05:17

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.

User Tag List

Thread: How to clone a section of html and display it

Thread Tools

Display

How to clone a section of html and display it

Bookmarks

Bookmarks

Posting Permissions