Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Repeat form on add form button

    • 0
    • 0
    • 0
    • 1
    • 0
    • 0
    • 0
    • 178
    Answer it

    Hello everyone when I click on button repeat, the form is repeating.

    In this form I am using bootstrap color picker but when form repeat color picker not works in repeated form. this is my form:
     

    <div class="col-sm-12 ">
    <hr>
    <a href="" class=" btn-po pull-right btn btn-facebook btn-sm" type="button"><i class="fa fa-plus-square"></i> Add PO</a>
    <fieldset class="repeat-form" style="width:100%;"><h3>PO# </h3>
    <hr> 
    <div class="clearfix"></div>
    
    <div class="form-group">
    <label class="col-sm-2 control-label">PO Date<span class="symbol required"></span></label>
    <div class="col-sm-9">
    <div class="input-group date" data-provide="datepicker">
    <input type="text" class="form-control" id="checkOutDate" placeholder="">
    <div class="input-group-addon">
    <span class="glyphicon glyphicon-th"></span>
    </div>
    </div>
    </div>
    
    
    
    </div>
    
    <div class="form-group">
    <label class="col-sm-2 control-label">PO Number<span class="symbol required"></span>
    
    </label>
    <div class="col-sm-9">
    <input type="text" class="form-control" id="" placeholder="" required>
    </div>
    </div>
    <div class="form-group">
    <label class="col-sm-2 control-label">Factory<span class="symbol required"></span>
    
    </label>
    <div class="col-sm-9">
    <input type="text" class="form-control" id="" placeholder="" required>
    </div>
    </div>
    <div class="form-group">
    <label class="col-sm-2 control-label">Style Number<span class="symbol required"></span>
    
    </label>
    <div class="col-sm-9">
    <input type="text" class="form-control" id="" placeholder="" required>
    </div>
    </div>
    <div class="form-group">
    <label class="col-sm-2 control-label">Color<span class="symbol required"></span>
    
    </label>
    <div class="col-sm-9">
    <div id="cp2" class="input-group colorpicker-component" data-provide="colorpicker"> 
    <input type="text" value="#00AABB" class="form-control" /> 
    <span class="input-group-addon"><i></i></span>
    <div class="colorpicker dropdown-menu colorpicker-with-alpha colorpicker-right colorpicker-hidden" style="top: 351px; left: 673.5px;"><div class="colorpicker-saturation" style="background-color: rgb(0, 234, 255);"><i style="top: 3.13725px; left: 39.2713px;"><b></b></i></div><div class="colorpicker-hue"><i style="top: 48.6254px;"></i></div><div class="colorpicker-alpha" style="background-color: rgb(150, 239, 247);"><i style="top: 0px;"></i></div><div class="colorpicker-color" style="background-color: rgb(150, 239, 247);"><div style="background-color: rgb(150, 239, 247);"></div></div><div class="colorpicker-selectors"></div></div>
    </div>
    </div>
    </div>
    
    <div class="form-group">
    <label class="col-sm-2 control-label">Quantity(color wise)<span class="symbol required"></span>
    
    </label>
    <div class="col-sm-9">
    <input type="text" class="form-control" id="" placeholder="" required>
    </div>
    </div>
    
    <div class="form-group">
    <label class="col-sm-2 control-label">Size Mix(color wise)<span class="symbol required"></span>
    
    </label>
    <div class="col-sm-4">
    <input type="text" class="form-control" id="" placeholder="Add Size" required>
    </div>
    <div class="col-sm-5">
    <input type="text" class="form-control" id="" placeholder="Add Quantity" required>
    </div>
    </div>
    <div class="form-group">
    <label class="col-sm-2 control-label">Original Delivery Date<span class="symbol required"></span></label>
    <div class="col-sm-9">
    <div class="input-group date" data-provide="datepicker">
    <input type="text" class="form-control" id="checkOutDate" placeholder="">
    <div class="input-group-addon">
    <span class="glyphicon glyphicon-th"></span>
    </div>
    </div>
    </div>
    
    
    
    </div>
    <div class="form-group">
    <label class="col-sm-2 control-label">Current Delivery Date<span class="symbol required"></span></label>
    <div class="col-sm-9">
    <div class="input-group date" data-provide="datepicker">
    <input type="text" class="form-control" id="checkOutDate" placeholder="">
    <div class="input-group-addon">
    <span class="glyphicon glyphicon-th"></span>
    </div>
    </div>
    </div>
    
    
    
    </div>
    <div class="form-group">
    <label class="col-sm-2 control-label">Lead Time<span class="symbol required"></span> 
    
    </label>
    <div class="col-sm-9">
    <input type="text" class="form-control" id="" placeholder="" required>
    </div>
    </div>
    
    <div class="form-group">
    <label class="col-sm-2 control-label">Pack type<span class="symbol required"></span> 
    
    </label>
    <div class="col-sm-9">
    <input type="text" class="form-control" id="" placeholder="" required>
    </div>
    </div>
    <div class="form-group">
    <label class="col-sm-2 control-label">Wash programe 
    
    </label>
    <div class="col-sm-9">
    <input type="text" class="form-control" id="" placeholder="" required>
    </div>
    </div>
    <div class="form-group">
    <label class="col-sm-2 control-label">Ship Via<span class="symbol required"></span> 
    
    </label>
    <div class="col-sm-9">
    <input type="text" class="form-control" id="" placeholder="" required>
    </div>
    </div>
    
    <div class="form-group">
    <label class="col-sm-2 control-label">Port Of Export
    
    </label>
    <div class="col-sm-9">
    <input type="text" class="form-control" id="" placeholder="" required>
    </div>
    </div>
    </fieldset>
    </div>
    and this is js:
    <script>
    var count=0;
    $('.pull-right').click(function(){
    if(count < 10)
    {
    
    var lastRepeatingGroup = $('.repeat-form').last();
    lastRepeatingGroup.clone().insertAfter(lastRepeatingGroup);
    
    count++;
    return false;
    
    }
    else{alert("You can add upto 10 record Only"); return false;}
    
    });
    
    // Delete a repeating section
    
    </script>
    <script>
    $('#cp2').colorpicker();
    </script> 

     

 1 Answer(s)

  • on repeat your colorpicker id repeat , and id should be unique
    in jquery you are using 
    $('#cp2').colorpicker();
    please check on repeat if the colorpicker id change or not , and add new jquery $('#id').colorpicker(); for the new colorpicker
     
Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: