This page shows you the code used to generate the form on the Custom Configuration 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(
{
maxFields: 8,
removeImgSrc: "/demos/assets/images/calendar.gif"
}
);
});
</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 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>
<!---
The default class for the add field "trigger" used by the plugin is "add-field-trigger".
--->
<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>
</div>
</fieldset>
</form>
</div>