[ Mini Kiebo ]
Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586
Path:
D:
/
xampp182
/
htdocs
/
simpeg
/
zapatec
/
zpform
/
zpform
/
demo
/
[
Home
]
File: multiple_custom.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <meta name="description" content=" You can specify multipleCallback config option inside your Zapatec.Form constructor. This must be a function. It will be called for each cloned element and each of its subchildren. Please, pay attention to the fact, that function will be called for each node inside cloned element. Not only top-level element. It receives 4 arguments: original - reference to original DOM element. cloneParent - reference to newly created element. cloned - reference to child element inside cloneParent. children - array with all cloned nodes for original node. Function can do anything it wants with that arguments. Usually you will change ID and NAME attributes for elements to make them unique. In this demo first form uses standard Zapatec.Form implementation (it adds unique numbers to all ID and NAME attributes). Second form uses user-defined function for changing ID and NAME attributes. This custom function prompts user for a string to add to cloned elements. Also it puts field name into its value. "> <meta name="keywords" content="dhtml tools,javascript,DHTML Tools,Javascript,ajax,AJAX,Ajax,ajax tools,AJAX Tools,tools controls,simple javascript tools"> <title>Zapatec DHTML Form Widget - Multiple Fields</title> <!-- Common JS files --> <script type='text/javascript' src='../../utils/zapatec.js'></script> <!-- Custom includes --> <script type='text/javascript' src='../src/form.js'></script> <script type='text/javascript' src='demo.js'></script> <!-- ALL demos need these css --> <link href="../../website/css/zpcal.css" rel="stylesheet" type="text/css"> <link href="../../website/css/template.css" rel="stylesheet" type="text/css"> <style type="text/css"> body { width: 778px; } </style> <!-- Theme css --> <link href="../themes/default.css" rel="stylesheet" type="text/css"> <link rel="SHORTCUT ICON" href="http://www.zapatec.com/website/main/favicon.ico"> </head> <body> <div class='zpCalSubHeader' style='text-align:center;'>Multiple Fields</div> This demo shows how to control creation of cloned elements. <div class='zpCalDemoText'> <ul> <li>This demo uses the <b>default theme</b>.</li> <li>You can specify <i>multipleCallback</i> config option inside your Zapatec.Form constructor.</li> <li>This must be a function. It will be called for each cloned element and each of its subchildren. Please, pay attention to the fact, that function will be called for <b>each</b> node inside cloned element. Not only top-level element.</li> <li>It receives 4 arguments: <ul> <li><i>original</i> - reference to original DOM element.</li> <li><i>cloneParent</i> - reference to newly created element.</li> <li><i>cloned</i> - reference to child element inside <i>cloneParent</i>.</li> <li><i>children</i> - array with all cloned nodes for <i>original</i> node.</li> </ul> </li> <li>Function can do anything it wants with that arguments. Usually you will change ID and NAME attributes for elements to make them unique.</li> <li>In this demo first form uses standard Zapatec.Form implementation (it adds unique numbers to all ID and NAME attributes). Second form uses user-defined function for changing ID and NAME attributes.</li> <li>This custom function prompts user for a string to add to cloned elements. Also it puts field name into its value.</li> </ul> </div> To control the proliferation of cloned elements use the <b>zpFormMultipleLimit</b> property.<br /> <br /> <form action="multiple_custom.html" id='userForm' method="post"> <div id='errOutput' class="errOutput"></div> <fieldset> <legend>Default behaviour</legend> <label class='zpFormLabel'>Address(5 lines max)</label> <div style="margin-left: 10em" class="zpFormMultipleInside zpFormMultipleLimit=5"> <input class='' value="" size="40" name="address" id="address" type="text" /> </div> <div class="zpFormMultipleInside"> <label class='zpFormLabel'>Credit card numbers</label> <input value="" size="40" name="credit-card" id="credit-card" type="text" class='zpFormCreditCard zpFormMask="0000-0000-0000-0000"' /> </div> </fieldset> <div class="zpFormButtons"> <input value="Submit" name="Submit" onclick="" type="submit" class="button" /> <input value="Clear" name="Clear" onclick="" type="reset" class="button" /> </div> </form> <p>Form below uses custom function for generating names for cloned elements.</p> <form action="multiple_custom.html" id='userForm2' method="post"> <fieldset> <legend>Custom behaviour</legend> <label class='zpFormLabel'>Address(5 lines max)</label> <div style="margin-left: 10em" class="zpFormMultipleInside zpFormMultipleLimit=5"> <input class='' value="" size="40" name="address" id="address" type="text" /> </div> <div class="zpFormMultipleInside"> <label class='zpFormLabel'>Credit card numbers</label> <input value="" size="40" name="credit-card" id="credit-card" type="text" class='zpFormCreditCard zpFormMask="0000-0000-0000-0000"' /> </div> </fieldset> <div class="zpFormButtons"> <input value="Submit" name="Submit" onclick="" type="submit" class="button"> <input value="Clear" name="Clear" onclick="" type="reset" class="button"> </div> </form> <script type="text/javascript"> // Run this to auto-activate all "zpForm" class forms in the document. var form = new Zapatec.Form({ form: 'userForm', showErrors: 'afterField', showErrorsOnSubmit: true, submitErrorFunc: testErrOutput, theme: "default" }); function generate_id(original, cloneParent, cloned, children){ if(!cloneParent.zpClonedName){ cloneParent.zpClonedName = prompt("please enter new id for cloned elements", ""); } // if element has 'id' attribute - make it unique. if( typeof(cloned.id) != 'undefined' && cloned.id != null && cloned.id != "" ){ cloned.id += "-" + cloneParent.zpClonedName; } // if element has 'name' attribute - make it unique. if( typeof(cloned.name) != 'undefined' && cloned.name != null && cloned.name != "" ){ cloned.name += "-" + cloneParent.zpClonedName; if( cloned.nodeName && cloned.nodeName.toLowerCase() == "input" && cloned.type.toLowerCase() == "text" ){ cloned.value = "This field has name " + cloned.name; } } } var form2 = new Zapatec.Form({ form: 'userForm2', showErrors: 'afterField', showErrorsOnSubmit: true, theme: "default", multipleCallback: generate_id }); </script> <noscript> <br/> This page uses an <a href='http://www.zapatec.com/website/main/products/suite/'> AJAX Component</a> - Zapatec DHTML Form Widget, but your browser does not support Javascript. <br/> <br/> </noscript> <br/><br/><br/> <div class="footer" style='width: 778px; text-align:center; margin-top:2em'> © 2004-2007 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong> </div> </body> </html>