SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2011
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to clone a section of html and display it

    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>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,676
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Using cloneNode is how you would copy it.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2011
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was hoping to get some help on the actual syntax for how to insert the cloned code.

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The link Paul gave you has an example of how to use it along with a nice explanation.

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2011
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,676
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    That works for me. It clones a copy of the fieldset within itself.

    I presume that your intentions are to achieve something else?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Zealot
    Join Date
    Dec 2011
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,676
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by aaron4osu View Post
    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)
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Zealot
    Join Date
    Dec 2011
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah I forgot about that. Is that what was messing it up? I guess I could change the id to a class

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,676
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by aaron4osu View Post
    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;
    ...
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Zealot
    Join Date
    Dec 2011
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  12. #12
    SitePoint Zealot
    Join Date
    Dec 2011
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,676
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    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)
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Zealot
    Join Date
    Dec 2011
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,676
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by aaron4osu View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Zealot
    Join Date
    Dec 2011
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •