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

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 18
    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> 

     

 0 Answer(s)

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: