Question

The fieldset in now cloning without retaining data from the previous fieldset as I intended. Thank you RobG and ATOzTOA for all your help.

The only problem I’m having now is the calendar is nonfunctional in the cloned fieldsets.

I have looked through several threads where people have had the same problem as me and I apologize for creating another thread on the subject.

Script for calendar dropdown.

<!-- calendar dropdown -->
<script>
$(document).ready(function() {    
$("#datepicker").datepicker();      
});    
</script>     

Script to clone the fieldset.

<!-- clone fieldset -->          
<script>
var _counter = 0;
function Add() {
_counter++;
var oClone = document.getElementById("template").cloneNode(true);
oClone.id += (_counter + "");
document.getElementById("placeholder").appendChild(oClone);
var inputs = oClone.getElementsByTagName('input');
for (var i=0, iLen=inputs.length; 
i<iLen; i++) {
inputs[i].value = '';
}
}
</script>

Fieldset to be cloned.

<div id="placeholder">
<!-- template -->
<div id="template">
<!-- event fieldset -->
<fieldset>           
  <label class="field-first" required>Event: &#42;<input type="text" name="event" value="" /></label>
  <label class="field-first" required>Date: &#42;<input type="text" id="datepicker" name="date" value="" /></label>
  <label class="field-first" required>Net Request Amount: &#42;<input type="text" name="request" value="" /></label>

  <div class="description"><p>Please type a <strong><em>DETAILED</em></strong> description of the item/event/activity:<br /></p></div>

  <textarea name="describe" cols="60" rows="10" required></textarea>
<!-- event fieldset -->
</fieldset>
<!-- template -->      
</div>
<!-- placeholder -->
</div> 
<!-- buttons -->
<button class="right-button" type="submit" name="submit" value="Submit">Submit</button>
<button class="left-button" "btn" type="button" name="Submit"  onclick="Add();">Add New Event</button>

Answer 1

Presumably you are adding content to the labels. You can use getElementsByTagName to get the labels from the clone, then set their innerHTML to ” (empty string) to remove any child nodes (or loop over the child nodes and remove them, but setting the innerHTML property is simpler). While looping over the labels, you can modify any other properties that might need it.

If you just want to clear the value of the input elements, same strategy only use getElementsByTagName('input') and set their value property to “ (empty string).

Note that you have three input elements with a name of “first_name”. It doesn’t seem like a good idea to do that when none of them seems to be a first name. Use a name that represents the data they hold or the purpose to which it will be put. It also doesn’t seem to be necessary to have one with an ID of “datepicker”. Either remove the ID, or if you need it (unlikley), modify the value so it’s unique to each cloned fragment.

Edit

To use getElementsByTagName to set the input values to “”:

var inputs = oClone.getElementsByTagName('input');

for (var i=0, iLen=inputs.length; i<iLen; i++) {
    inputs[i].value = '';
}