Advertisement
Guest User

Dynamic Field Creation and Value Cloning

a guest
Jul 27th, 2010
237
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <script type="text/javascript">
  2. var current= 1;
  3. $(document).ready(function() {
  4.     $("#addUpload").click(function() {
  5.         current++;
  6.  
  7.        
  8.         $newUpload= $("#userTemplate").clone(true).removeAttr("id").attr("id", "fieldSet" + current).insertBefore("#userTemplate");
  9.        
  10.         $newUpload.children("label").children("input").each(function(i) {
  11.             var $currentElem= $(this);
  12.             $currentElem.attr("name",$currentElem.attr("name")+current);
  13.             $currentElem.attr("id",$currentElem.attr("id")+current);
  14.         });
  15.         $newUpload.children("label").children("select").each(function(i) {
  16.             var $currentElem= $(this);
  17.             $currentElem.attr("name",$currentElem.attr("name")+current);
  18.             $currentElem.attr("id",$currentElem.attr("id")+current);
  19.         });
  20.        
  21.         var f = $("#fieldSet"+current);
  22.         f.html(f.html().replace("fieldSetID", "fieldSet"+current));
  23.  
  24.         $newUpload.appendTo("#mainField").fadeIn(600);
  25.         $newUpload.addClass("set");
  26.         $newUpload.removeClass("hideElement");
  27.         var n = $(".set").size();
  28.         $("#setcount").val(n);
  29.         $('#docDate'+current).dateEntry();
  30.         $('#sdoc'+current).setValue($('#sdoc').getValue());
  31.         $('#xDocUpload'+current).setValue($('#xDocUpload').getValue());
  32.         $('#dateCode'+current).setValue($('#dateCode').getValue());
  33.         $('#docDate'+current).setValue($('#docDate').getValue());
  34.  
  35.        
  36.         //add validation
  37.         $("#xDocUpload"+current).rules("add", { required:true,minlength:1 });
  38.         $("#docDate"+current).rules("add", { required:true,date:true });
  39.         $("#dateCode"+current).rules("add", { required:true,minlength:1});
  40.         $("#sdoc"+current).rules("add", { required:true,minlength:1});
  41.     });
  42.    
  43.     $("#uploadFields").validate({
  44.         errorPlacement: function(error, element) {
  45.                error.insertAfter(element);
  46.            },
  47.         rules: {
  48.             xDocUpload1: {
  49.                 required: true,
  50.                 minlength: 1
  51.             }
  52.             ,docDate1: {
  53.                 required:true,
  54.                 date:true
  55.             }
  56.             ,dateCode1: {
  57.                 required: true,
  58.                 minlength: 1
  59.             }
  60.             ,sdoc1: {
  61.                 required: true,
  62.                 minlength: 1
  63.             }
  64.             ,MasterDocTypeID: {
  65.                 required: true,
  66.                 minlength: 1
  67.             }
  68.         }
  69.     });
  70. });
  71.  
  72. function removeSet(id) {
  73.     $(id).fadeOut(600,function(){$(id).remove();});
  74.     var n = $(".set").size();
  75.     $("#setcount").val(n);
  76. };
  77. </script>
  78.  
  79. Also, here is the onChange event that needs to be attached to each field in the "template" fieldset so when a new set is created, the template field values are updated so the next set created has the values of the previous set, thus saving the user from having to repeat setting values if the case warrants it.
  80.  
  81. onChange="$('#dateCode').setValue($(this).getValue(this));"
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement