Help duplicating a section of html

Discussion in 'JavaScript' started by aaron4osu, Apr 12, 2012.

  1. #1
    I have a form and I'm trying to duplicated the fieldset class='addPosition' when the user clicks
    
    <a href="" onClick="cloneFieldset();" >Add Additional Positions:</a>
    
    Code (markup):

    here is the javascript I have so far (which isn't working):
    
    <script language="JavaScript">
      
      function cloneFieldset(){
    
    
         var fieldset = document.getElementsByClassNames('fieldset');
         var newFieldset = fieldset.cloneNode(true);
         fieldset.insertBefore(newFieldset, fieldset.nextSibling); 
      } 
    
    
    </script>
    
    Code (markup):

    here is what I'm trying to duplicate:
    
    <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>
    
    Code (markup):

    here is the entire doc:
    
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>Upload Project</title>
      <link rel="stylesheet" media="screen" href="css/form.css" >
      <script src="js/jquery-1.7.min.js" type="text/javascript"></script>
    
    
    <script language="JavaScript">
      
      function cloneFieldset(){
    
    
         var fieldset = document.getElementsByClassName('addPosition');
         var newFieldset = fieldset.cloneNode(true);
         fieldset.insertBefore(newFieldset, fieldset.nextSibling); 
    
    
      } 
    
    
    </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 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 goes here-->
    
    
    
    
            <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>
    </body>
    </html>
    
    Code (markup):

     
    aaron4osu, Apr 12, 2012 IP