Jquery UI datepicker is not working in dynamic fields

Question

I'm adding dynamic input fields, but datepicker not working in dynamically generated fields.

$(document).ready(function() {
  $('#text').datepicker();
})

function addmore() {
  var html = '<div class="form-group"><input type="text" placeholder="text" id="text"><button type="button" onclick="removeInput(this)">&times;</button></div>';
  $('.input-fields').append(html);
}

function removeInput(obj) {
  $(obj).parent().remove();
}

.form-group {
  margin-bottom: 10px;
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<div>
  <div class="input-fields">
    <div class="form-group">
      <input type="text" placeholder="text" id="text">
    </div>
  </div>
  <button type="button" onclick="addmore()">Add more</button>
</div>

Abhishek Pandey · Accepted Answer · 2017-01-13 08:59:31Z

2

You need to generate new Id for every appended input, and then recall datepicker function.

var i = 0;
$(document).ready(function(){
  $('#text').datepicker();
})
function addmore(){
    i++
    var html = '<div class="form-group"><input type="text" placeholder="text-'+i+'" id="text-'+i+'"><button type="button" onclick="removeInput(this)">&times;</button></div>';
    $('.input-fields').append(html);
     $('#text-'+i).datepicker();    
}
function removeInput(obj){
    $(obj).parent().remove();
}

.form-group {
  margin-bottom: 10px;
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<div>
  <div class="input-fields">
    <div class="form-group">
      <input type="text" placeholder="text" id="text">
    </div>
  </div>
  <button type="button" onclick="addmore()">Add more</button>
</div>

edited Jan 13, 2017 at 8:59

answered Jan 13, 2017 at 8:17

Abhishek Pandey

13.6k8 gold badges41 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Talent Runners Over a year ago

Thank you for quick response.

Mihai Alexandru-Ionut · Accepted Answer · 2017-01-13 08:21:32Z

1

The simpliest way is to use text class. You used text id, and that's a wrong way because when you add items, you will try to attach event for more elements with same id.

$(document).ready(function() {
  $('.text').datepicker();
})

function addmore() {
  var html = '<div class="form-group"><input type="text" placeholder="text" class="text"><button type="button" onclick="removeInput(this)">&times;</button></div>';
  $('.input-fields').append(html);
  $('.text').datepicker();
}

function removeInput(obj) {
  $(obj).parent().remove();
}

.form-group {
  margin-bottom: 10px;
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<div>
  <div class="input-fields">
    <div class="form-group">
      <input type="text" placeholder="text" class="text">
    </div>
  </div>
  <button type="button" onclick="addmore()">Add more</button>
</div>

answered Jan 13, 2017 at 8:21

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

2 Comments

Talent Runners Over a year ago

You answers is shorter than other one, but using unique ID is much better I guess.

Ionut Necula Over a year ago

@TalentRunners, this should be the accepted answer, as it's a better approach considering the use of class instead of id

Collectives™ on Stack Overflow

Jquery UI datepicker is not working in dynamic fields

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related