This page shows you the code used to generate the form on the Multiple Fields demo page.


<!--- load jQuery (DUH!) --->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<!--- load dynamicField plugin --->
<script type="text/javascript" src="/commonassets/scripts/jQuery/forms/jquery.dynamicField-1.0.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
  // pass the first dynamic field container to the plugin
  $("#my-demo-form #removable-email-container-1").dynamicField();
  
  // pass our second dynamic field container to the plugin
  $("#my-demo-form #removable-phone-container-1").dynamicField();
 });
</script>
<div class="form-container">
 <form action="#" method="post" enctype="application/x-www-form-urlencoded" id="my-demo-form" class="uniForm">
  <fieldset class="inlineLabels" id="cfU-204BD901-09C4-BEF8-6008F40594EA946F">
   <div class="ctrlHolder">
    <!--- 
     The dynamicField plugin works upon the convention of using an ID with a "-N" appended to
     it, where "N" is a digit.  So, as you can see below, we are assigning a "-1" to the first
     container.
     
     The default class for the dynamic field "row" used by the plugin is "removable-field-row".
     --->
    <div class="ctrlHolder">
     <div id="removable-email-container-1" class="removable-field-row">
      <label for="email_1">Email Address</label>
      <input type="text" name="email_1" id="email_1" value="" class="textInput removable" />
      <img src="/commonassets/images/spacer.gif" width="16" height="16" alt="" title="Remove This Item" class="" />
     </div>
     <div id="add-email-container" class="add-field-container">
      <span class="add-field-trigger">
       <img src="/commonassets/images/icons/add.gif" alt="" title="Add New Email" />
       Add Email
      </span>
     </div>
    </div>
    
    <!--- 
     We added a second field that can be added/removed dynamically.
     
     IMPORTANT!! Note that we have changed the class on our container div to "removable-phone-row".
     You *MUST* use a different class for each dynamic field on your page!
     --->
    <div class="ctrlHolder">
     <div id="removable-phone-container-1" class="removable-phone-row">
      <label for="phone_1">Phone Number</label>
      <input type="text" name="phone_1" id="phone_1" value="" class="textInput removable" />
      <img src="/commonassets/images/spacer.gif" width="16" height="16" alt="" title="Remove This Phone" class="" />
     </div>
     <div id="add-phone-container" class="add-field-container">
      <span class="add-field-trigger">
       <img src="/commonassets/images/icons/add.gif" alt="" title="Add New Phone" />
       Add Phone
      </span>
     </div>
    </div>
   </div>
  </fieldset>
 </form>
</div>