This page shows you the code used to generate the form on the cfUniForm Integration 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 dynamic field container to the plugin
  $("#my-demo-form #removable-name-container-1").dynamicField();
 });
</script>
<!--- 
 We add a few rules to our CSS so it plays very nicely with the Uni-Form CSS.
 These rules can be added to your main stylesheet.
 --->
<style type="text/css">
/* BEGIN: dynamic add/remove row rules */
input.removable { width: 60% !important; }
img.remove-field-trigger { margin-left: 10px; cursor: pointer; }
div.removable-field-row { margin-top: 15px; }
div.add-field-container { margin: 15px 0 0 32% !important; }
span.add-field-trigger { cursor: pointer; }
/* END: dynamic add/remove row rules */
</style>
<div class="cfUniForm-form-container">
 <uform:form action="#" id="my-demo-form" showSubmit="false">
  <uform:fieldset legend="">
   <!--- 
    simply use a "custom" field type, and add the default xhtml markup for the field and add trigger.
    For more details, be sure to visit the other demos.
    --->
   <uform:field type="custom">
    <!--- custom code here --->
    <div id="removable-name-container-1" class="removable-field-row">
     <label for="name_1">Name</label>
     <input type="text" name="name_1" id="name_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-name-container" class="add-field-container">
     <span class="add-field-trigger"><img src="/commonassets/images/icons/add.gif" alt="" title="Add New Item" />
     Add Row</span>
    </div>
   </uform:field>
  </uform:fieldset>
 </uform:form>
</div>