Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
- "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <title>Simple cloning demo</title>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
- <script type="text/javascript" src="/jquery/jquery.js"></script>
- <script type="text/javascript" src="/jquery/jquery.validate.js"></script>
- <script type="text/javascript">
- var current= 1;
- $(document).ready(function() {
- $("#addPerson").click(function() {
- current++;
- /* GWF - Modified the line below */
- $newPerson= $("#userTemplate").clone(true).removeAttr("id").attr("id", "fieldSet" + current).insertBefore("#userTemplate");
- $newPerson.children("p").children("label").each(function(i) {
- var $currentElem= $(this);
- $currentElem.attr("for",$currentElem.attr("for")+current);
- });
- $newPerson.children("p").children("input").each(function(i) {
- var $currentElem= $(this);
- $currentElem.attr("name",$currentElem.attr("name")+current);
- $currentElem.attr("id",$currentElem.attr("id")+current);
- });
- //Technically, you could update the attributes with one loop...
- //
- // $newPerson.children("p").children("label,input").each...
- //
- // ...but you end up assigning "NaN" names and ids to the labels and other such wackiness.
- /* GWF - Added the following two lines */
- var f = $("#fieldSet"+current);
- f.html(f.html().replace("fieldSetID", "fieldSet"+current));
- $newPerson.appendTo("#mainField");
- $newPerson.removeClass("hideElement");
- //add validation
- $("#firstname"+current).rules("add", { required:true,minlength:2 });
- $("#lastname"+current).rules("add", { required:true,minlength:2 });
- $("#email"+current).rules("add", { required:true,email:true });
- });
- /*
- $("#demoForm").submit(function() {
- alert("Yeah...this doesn't really submit any data anywhere...");
- return false;
- });
- */
- $("#demoForm").validate({
- groups: {
- fullname: "firstname1 lastname1"
- },
- errorPlacement: function(error, element) {
- if (element.attr("name") == "firstname1"
- || element.attr("name") == "lastname1" )
- error.insertAfter("#lastname1");
- else
- error.insertAfter(element);
- },
- rules: {
- firstname1: {
- required: true,
- minlength: 2
- }
- ,lastname1: {
- required: true,
- minlength: 2
- }
- ,email1: {
- required: true,
- email: true
- }
- }
- });
- });
- /* GWF - Add function to remove Person */
- function removePerson(id) {
- $(id).remove();
- };
- </script>
- <style>
- .hideElement {display:none;}
- </style>
- </head>
- <body>
- <h2>jQuery Cloning Demo</h2>
- <!-- GWF - Moved the following div out of the form so it does not get sent on a post. Also add the link to remove the fieldset --->
- <div id="userTemplate" class="hideElement">
- <p>
- <label for="firstname">Name</label> <em>*</em>
- <input id="firstname" name="firstname" size="25" /> <input id="lastname" name="lastname" size="25" />
- </p>
- <p>
- <label for="email">Email</label> <em>*</em><input id="email" name="email" size="25" />
- </p>
- <p>
- <a href='#' onClick='removePerson("#fieldSetID"); return false;'>Remove</a>
- </p>
- </div>
- <form name="demoForm" id="demoForm" method="post" action="none.cfm">
- <fieldset id="mainField">
- <div>
- <p>
- <label for="firstname1">Name</label>
- <em>*</em> <input id="firstname1" name="firstname1" size="25" /> <input id="lastname1" name="lastname1" size="25" />
- </p>
- <p>
- <label for="email1">Email</label>
- <em>*</em><input id="email1" name="email1" size="25" />
- </p>
- </div>
- </fieldset>
- <p>
- <input type="button" id="addPerson" value="Add Another Person">
- </p>
- <input type="submit" value="Save">
- </form>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement