Got an iPhone or iPad? We have a brand new Pastebin App for both devices, and it's totally free! Click here to download the new Pastebin App for iOS.
Public Pastes
Guest

Gary Funk

By: a guest on Oct 20th, 2009  |  syntax: None  |  size: 3.66 KB  |  hits: 452  |  expires: Never
download  |  raw  |  embed  |  report abuse
Copied
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title>Simple cloning demo</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  7. <script type="text/javascript" src="/jquery/jquery.js"></script>
  8. <script type="text/javascript" src="/jquery/jquery.validate.js"></script>
  9. <script type="text/javascript">
  10. var current= 1;
  11. $(document).ready(function() {
  12.         $("#addPerson").click(function() {
  13.                 current++;
  14.                 /* GWF - Modified the line below */
  15.                 $newPerson= $("#userTemplate").clone(true).removeAttr("id").attr("id", "fieldSet" + current).insertBefore("#userTemplate");
  16.                 $newPerson.children("p").children("label").each(function(i) {
  17.                         var $currentElem= $(this);
  18.                         $currentElem.attr("for",$currentElem.attr("for")+current);
  19.                 });
  20.                 $newPerson.children("p").children("input").each(function(i) {
  21.                         var $currentElem= $(this);
  22.                         $currentElem.attr("name",$currentElem.attr("name")+current);
  23.                         $currentElem.attr("id",$currentElem.attr("id")+current);
  24.                 });
  25.                 //Technically, you could update the attributes with one loop...
  26.                 //
  27.                 //              $newPerson.children("p").children("label,input").each...
  28.                 //
  29.                 //  ...but you end up assigning "NaN" names and ids to the labels and other such wackiness.
  30.                 /* GWF - Added the following two lines */
  31.                 var f = $("#fieldSet"+current);
  32.                 f.html(f.html().replace("fieldSetID", "fieldSet"+current));
  33.  
  34.                 $newPerson.appendTo("#mainField");
  35.                 $newPerson.removeClass("hideElement");
  36.                 //add validation
  37.                 $("#firstname"+current).rules("add", { required:true,minlength:2 });
  38.                 $("#lastname"+current).rules("add", { required:true,minlength:2 });
  39.                 $("#email"+current).rules("add", { required:true,email:true });
  40.  
  41.         });
  42.         /*
  43.         $("#demoForm").submit(function() {
  44.                 alert("Yeah...this doesn't really submit any data anywhere...");
  45.                 return false;
  46.         });
  47.         */
  48.         $("#demoForm").validate({
  49.                 groups: {
  50.                         fullname: "firstname1 lastname1"
  51.                 },
  52.                 errorPlacement: function(error, element) {
  53.                          if (element.attr("name") == "firstname1"
  54.                                                  || element.attr("name") == "lastname1" )
  55.                            error.insertAfter("#lastname1");
  56.                          else
  57.                            error.insertAfter(element);
  58.                    },
  59.                 rules: {
  60.                         firstname1: {
  61.                                 required: true,
  62.                                 minlength: 2
  63.                         }
  64.                         ,lastname1: {
  65.                                 required: true,
  66.                                 minlength: 2
  67.                         }
  68.                         ,email1: {
  69.                                 required: true,
  70.                                 email: true
  71.                         }
  72.                 }
  73.     });
  74. });
  75.  
  76. /* GWF - Add function to remove Person */
  77. function removePerson(id) {
  78.         $(id).remove();
  79. };
  80. </script>
  81. <style>
  82. .hideElement {display:none;}
  83. </style>
  84. </head>
  85.  
  86. <body>
  87. <h2>jQuery Cloning Demo</h2>
  88. <!-- 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 --->
  89. <div id="userTemplate" class="hideElement">
  90. <p>
  91.         <label for="firstname">Name</label> <em>*</em>
  92.         <input id="firstname" name="firstname" size="25" /> <input id="lastname" name="lastname" size="25" />
  93. </p>
  94. <p>
  95.         <label for="email">Email</label> <em>*</em><input id="email" name="email" size="25" />
  96. </p>
  97. <p>
  98.         <a href='#' onClick='removePerson("#fieldSetID"); return false;'>Remove</a>
  99. </p>
  100. </div>
  101. <form name="demoForm" id="demoForm" method="post" action="none.cfm">
  102.         <fieldset id="mainField">
  103.         <div>
  104.                 <p>
  105.                         <label for="firstname1">Name</label>
  106.                         <em>*</em> <input id="firstname1" name="firstname1" size="25" /> <input id="lastname1" name="lastname1" size="25" />
  107.                 </p>
  108.  
  109.                 <p>
  110.                         <label for="email1">Email</label>
  111.                         <em>*</em><input id="email1" name="email1" size="25" />
  112.                 </p>
  113.         </div>
  114.         </fieldset>
  115.         <p>
  116.         <input type="button" id="addPerson" value="Add Another Person">
  117.         </p>
  118.         <input type="submit" value="Save">
  119. </form>
  120. </body>
  121. </html>
create a new version of this paste RAW Paste Data