javascript - jQuery clone() issue -
here full html date , time table :
<div class="addmore_box_date"> <div class="row"> <div class="col-xs-6 col-sm-4 col-md-4"> <input type='text' name="add_date[]" class="form-control" id="add_date" placeholder="select date"> </div> <div class="col-xs-6 col-sm-4 col-md-4"> <select class="form-control add_time" id="add_time" name="add_time[]"> <option value="">select time</option> <option value="12:00 am">12:00 am</option> <option value="1:00 am">1:00 am</option> <option value="2:00 am">2:00 am</option> <option value="3:00 am">3:00 am</option> <option value="4:00 am">4:00 am</option> <option value="5:00 am">5:00 am</option> <option value="6:00 am">6:00 am</option> <option value="7:00 am">7:00 am</option> <option value="8:00 am">8:00 am</option> <option value="9:00 am">9:00 am</option> <option value="10:00 am">10:00 am</option> <option value="11:00 am">11:00 am</option> <option value="12:00 pm">12:00 pm</option> <option value="1:00 pm">1:00 pm</option> <option value="2:00 pm">2:00 pm</option> <option value="3:00 pm">3:00 pm</option> <option value="4:00 pm">4:00 pm</option> <option value="5:00 pm">5:00 pm</option> <option value="6:00 pm">6:00 pm</option> <option value="7:00 pm">7:00 pm</option> <option value="8:00 pm">8:00 pm</option> <option value="9:00 pm">9:00 pm</option> <option value="10:00 pm">10:00 pm</option> <option value="11:00 pm">11:00 pm</option> </select> </div> </div> <br/> </div> <label for=""><a id="addmoredate">add more date & time</a></label> now going adding more date , time using add more date & time link. it's adding new date , time. here issue :
e.g. default it's showing 1 date , time field. date field calendar coming using add_date id.
so when add date , time field can select date calendar
but if delete added date , time field close link , if add 1 can't date calendar.
may can't correct add_date id.
can please tell me how can solved ?
here jquery code :
$(document).ready(function() { var max_fields = 30; //maximum input boxes allowed var wrapper = $(".addmore_box_date"); //fields wrapper var add_button = $("#addmoredate"); //add button id $('#add_date').datetimepicker({ timepicker:false, format:'y-m-d', formatdate:'y/m/d', mindate:'-1970/01/02', // yesterday minimum date maxdate:'+2017/12/01', // , tommorow maximum date calendar }); var x = 1; //initlal text box count $(add_button).click(function(e) { //on add input button click e.preventdefault(); if(x < max_fields){ //max input box allowed x++; //text box increment var newrow = $("<span id='date_time_close'><div class='row'><div class='col-xs-6 col-sm-4 col-md-4'><input type='text' name='add_date[]' class='form-control' id='add_date"+x+"' placeholder='select date'></div><div class='col-xs-6 col-sm-4 col-md-4'><div class='new_select'></div><a class='remove_date_time pull-right'> close</a></div></div></span>"); newrow.find('.new_select').append($('select.add_time').clone().attr('class', 'form-control add_time'+x)); $(wrapper).append(newrow); $('#add_date'+x).datetimepicker({ timepicker:false, format:'y-m-d', formatdate:'y/m/d', mindate:'-1970/01/02', // yesterday minimum date maxdate:'+2017/12/01', // , tommorow maximum date calendar }); } }); $(wrapper).on("click",".remove_date_time", function(e){ //user click on remove text e.preventdefault(); $('#date_time_close').remove(); x--; }) });
i think can solve problem 3 steps:
- add
class='add_time'<select>tag below:
<select class="form-control add_time" id="add_time" name="add_time[]" class='add_time'> get active
add_dateelements countvar count = $('.add_button').length;, usecountvariable insteadxin condition.remove
x--;code.
and jquery code must this:
$(document).ready(function() { var max_fields = 30; //maximum input boxes allowed var wrapper = $(".addmore_box_date"); //fields wrapper var add_button = $("#addmoredate"); //add button id $('#add_date').datetimepicker({ timepicker:false, format:'y-m-d', formatdate:'y/m/d', mindate:'-1970/01/02', // yesterday minimum date maxdate:'+2017/12/01', // , tommorow maximum date calendar }); var x = 1; //initlal text box count var count = $('.add_button').length; $(add_button).click(function(e) { //on add input button click e.preventdefault(); if(count < max_fields){ //max input box allowed x++; //text box increment var newrow = $("<span id='date_time_close'><div class='row'><div class='col-xs-6 col-sm-4 col-md-4'><input type='text' name='add_date[]' class='form-control' id='add_date"+x+"' placeholder='select date'></div><div class='col-xs-6 col-sm-4 col-md-4'><div class='new_select'></div><a class='remove_date_time pull-right'> close</a></div></div></span>"); newrow.find('.new_select').append($('select.add_time').clone().attr('class', 'form-control add_time'+x)); $(wrapper).append(newrow); $('#add_date'+x).datetimepicker({ timepicker:false, format:'y-m-d', formatdate:'y/m/d', mindate:'-1970/01/02', // yesterday minimum date maxdate:'+2017/12/01', // , tommorow maximum date calendar }); } }); $(wrapper).on("click",".remove_date_time", function(e){ //user click on remove text e.preventdefault(); $('#date_time_close').remove(); }) }); description: when remove add_date element on close button click, , decrease x variable, datetimepicker object of removed element in memory , not removed.
when add new element name of removed element, can not define datetimepicker object same name.
Comments
Post a Comment